vertical-alignment | 易学教程

How to vertically center text in textarea?

阅读更多关于 How to vertically center text in textarea?

问题 Is there a way to vertically center text entered in textarea with known width and height? I have a fixed-sized textarea where text should be typed in and I want the text to start from the center while you type it. Horizontal centering could be done with text-align:center, but I cant find any way to align horizontally. 回答1: I think you cannot do the vertical alignment directly. You should make another div over the text area and use it to make text vertically aligned and take the inputs from

How to align rotated text in the middle of a div

阅读更多关于 How to align rotated text in the middle of a div

问题 I would like to vertical align rotated text in the middle of a 100% height div, like the image below. So whenever the screen size changes the text stays in the middle of the div. Anyone has a solution for this? http://jsfiddle.net/SVkPU/1/ .rotate-270 { -o-transform: rotate(270deg); -moz-transform: rotate(270deg); -webkit-transform: rotate(270deg); transform:rotate(270deg); } .left { float:left; background:#000; color:#fff; text-align:center; height:50px; } .right { float:right; background:

How do I center text on top of an image in both dimensions?

阅读更多关于 How do I center text on top of an image in both dimensions?

问题 Thank you all for your prompt feedback, it has been very helpful. One issue remains: Neither line-height , nor padding seem to be able to center both text that is long enough to wrap around and text that fits neatly on one line in the middle of the picture when applied in a table cell. Oddly enough, the padding solution provided below by SwDevMan81 works flawlessly when applied to a div, but not a table cell... I apologize in advance for my naivety; this is my first foray into HTML and CSS.

Vertically center div in a div with height auto

阅读更多关于 Vertically center div in a div with height auto

问题 Well, I got this structure: #parent{ max-width: 800px; height: auto; margin: auto; } #child{ position: absolute; width: 100%; height: 52px; display: none; } <div id="parent"> <div id="child"></div> </div> The child div is hidden per default. It gets visible by using jQuery (.fadeIn). Now the question is, how can I vertically center the child element by using only css? 回答1: I have created a prototype... But I had to modify your HTML and CSS so it might not be the best solution: http://jsfiddle

How to vertical-align text that runs multiple lines

阅读更多关于 How to vertical-align text that runs multiple lines

问题 I realise there have probably been a few questions with a title similar to this, but I think my question is a little different, I've tried to do some background reading and can't seem to find an elegant solution to this anywhere (although that's possibly because one doesn't exist) Basically, I have three boxes, each with an image to the left, and some text in them, the problem is getting the text to vertical-align, having done some background reading on how vertical-align actually works (I

Vertically centering text inside flexbox item

阅读更多关于 Vertically centering text inside flexbox item

问题 I want the flex items to take full height, but the content inside them to be vertically centred. justify-content: centre doesn't work, and align-self: centre on the item itself shrinks its height to its own content, while I want all items to be the same height. In this example I want the numbers to be vertically centred: http://codepen.io/ilyador/pen/ogYbWO?editors=110 .flex-container { padding: 0; margin: 0; list-style: none; display: flex; } .flex-item { flex: 1 1; background: tomato;

TextBlock text not vertically centering within DataGridCell

阅读更多关于 TextBlock text not vertically centering within DataGridCell

问题 I'm creating a DataGrid in C# (from code-behind/not XAML), but no matter what I try, I can't get the text to be vertically center in the data cells: I started off with: var CellStyle = new Style(typeof(DataGridCell)) { Setters = { new Setter(TextBlock.TextAlignmentProperty, TextAlignment.Center) } }; Which correctly targets the cell and horizontally centres the text (per the screenshot above). Trying to vertically center the text, I know that a TextBlock doesn't support vertical content

vertical align text/image with bootstrap

阅读更多关于 vertical align text/image with bootstrap

Using Bootstrap, I am attempting to vertically align text and an image in two spans (span 4 and span8) with one image and text within the same span (span8). The image is currently floated left. The image will hide/unhide depending upon the width of the browser window so the text will take up the space of the hidden image. That part works. But vertically aligning the text with the image does not and I have looked at, and tried, about every 'solution' I can find but none work for me. The total height of the text is less than the height of the image. code... <div class="outer"> <div class="row">

How do I vertically align text inside an anchor element, which is nested within an unordered list

阅读更多关于 How do I vertically align text inside an anchor element, which is nested within an unordered list

问题 I have searched extensively and seen numerous examples on how to vertical-align text using the vertical-align property and the line-height property. However, all my efforts seem to bear no fruit as I am unable to get my text to align vertically. How do I do vertically align text to be centered? The height properties are not fixed so I can't use line-height . HTML <nav> <ul> <li><a href="html/login.html">Login</a></li> <li><a href="html/user_registration.html">Register</a></li> <li><a href="#"

How to vertically align spans with text and image

阅读更多关于 How to vertically align spans with text and image

问题 I have now been looking for hours (obviously not in the right place!) Please consider this sample: http://jsfiddle.net/DYLs4/9/ <div id="wrapper"> <span id="text24">Text 24</span> <span id="text12">Text 12</span> <span id="icon"></span> </div> css: #text24{ font-size:24px; color:#999; } #text12{ font-size:12px; color:#000; } #icon{ height:36px; width:36px; display:inline-block; background:url(some-icon.png); } What I'm trying to achieve is this: Center vertically the text24 (relative to