vertical-alignment | 易学教程

What is the least horrible way to center an element with CSS?

阅读更多关于 What is the least horrible way to center an element with CSS?

I have html that looks like this: <!DOCTYPE html> <head> <meta charset="utf-8">  </head> <body> <header> <h1>Some title thing, who knows</h1> <nav> <ul> <li><a href="one/">One</a></li> <li><a href="two/">Two</a></li> <li><a href="three/">Three</a></li> </ul> </nav> </header> </body> </html> If I give header an auto margin and a width, it's horizontally centered. What's the least horrible way to ensure that it's vertically centered, as well? I am aware of the following articles which

Vertical align not working on div

阅读更多关于 Vertical align not working on div

问题 I'm trying to vertical align a div but it's not working at all for some reason. What am I doing wrong? body { border: 1px solid red; height: 500px; } #contactUs { border: 1px solid blue; vertical-align: bottom; } <div id = "contactUs"> Contact Us </div> Note: I do not want absolute positioning answers. 回答1: The vertical alignment effort didn't work because the vertical-align property applies only to inline and table-cell elements. (See the spec for details.) You can align the #contactus div

Inline-block elements and vertical-align reasoning

阅读更多关于 Inline-block elements and vertical-align reasoning

I have 2 div boxes next to each other using display: inline-block. Without content both inline-block divs are vertically aligned to top. If both have content they also vertically align to top. If only one of them has text content then the div box that has text content is vertically aligned to bottom while the one wihtout any text content remains vertically aligned to top. If one box has plain text content and the other has e.g. an input field or a header tag then the box with only text content moves down only slighly (maybe 2 or 3px) while the one with the input or header tag stays on top.

flexbox vertical align child top, center another

阅读更多关于 flexbox vertical align child top, center another

I've got the following markup: .row { display: flex; align-items: stretch; margin: -16px; background: #ddd; } .row .col { display: flex; flex-direction: column; justify-content: center; flex: 1; margin: 16px; background: #fff; } .header, .content, .footer { padding: 16px; background: red; } <div class="row"> <div class="col"> <div class="header">Header #1</div> <div class="content">Lorem Ipsum<br />Dolor<br />Sit Amet</div> <div class="footer">Footer</div> </div> <div class="col"> <div class="header">Header #2</div> <div class="content">Lorem Ipsum<br />Dolor</div> </div> </div> Unfortunatly

Align multiple divs in one line and center text veticaly and horizontally

阅读更多关于 Align multiple divs in one line and center text veticaly and horizontally

问题 Note: This is a reference question. If you see one of the many questions fitting this pattern, please simply refer them as duplicate, referencing this question. Many visitors ask question with context referring to, here is a solution for that : I want to align n number of div s in one line and also place the content in them vertically and horizontally in center . The text to align vertically can be a single line or a paragraph <p> too!! 回答1: To show n-number of div s in one line , there are 3

Bootstrap: align elements to bottom of column

阅读更多关于 Bootstrap: align elements to bottom of column

To explain it in a short way, this is what I'm trying to achieve: http://www.bootply.com/Muh7eahFC8# A responsive design, with three columns, and a button at the bottom of each column. The problem is that I'm setting the height of the columns manually, and I'd like the whole thing to automatically adapt to the longest content of the three column. Right now, I'm setting a different height based on the size of each viewport: @media only screen and (min-width : 992px) { div { height: 180px; } div a { position: absolute; bottom: -40px; } } @media only screen and (min-width : 1200px) { div { height

Vertical align not working on div

阅读更多关于 Vertical align not working on div

I'm trying to vertical align a div but it's not working at all for some reason. What am I doing wrong? body { border: 1px solid red; height: 500px; } #contactUs { border: 1px solid blue; vertical-align: bottom; } <div id = "contactUs"> Contact Us </div> Note: I do not want absolute positioning answers. Michael_B The vertical alignment effort didn't work because the vertical-align property applies only to inline and table-cell elements. ( See the spec for details .) You can align the #contactus div at the bottom of the containing block ( body ) with flexbox . body { display: flex; /* convert

How to Vertically center images and text in CSS

阅读更多关于 How to Vertically center images and text in CSS

I have this fiddle here and i want to vertically center the text in the header, the picture in the footer and the picture in the middle which is sticked to the header... I don'T know how to achieve this and i already tried out some things but to no avail. I'll hope for your help here SO (= Link to the jsfiddle: http://jsfiddle.net/xF6xV/2/ HTML: <body> <div id="header"> <h1>Test Text but it's not inside the actual div...</h1> </div> <div id="content"> <div id="topcontent"> <img src="http://www.curiousfix.com/wp-content/uploads/2013/06/only_god_forgives_xxlg-2000x2964.jpg" id="left" > <img src=

How to align text vertically?

阅读更多关于 How to align text vertically?

问题 What is the easiest way to align the text vertically here with CSS ? <ul> <li>Hello</li> <li>Bye Bye</li> <li>Ciao</li> </ul> li { border: 1px solid black; width: 100px; height: 50px; margin-bottom: 20px; text-align: center; } 回答1: If you have just one line of text, you can set the line-height to the same value as the height . This works for any element. 回答2: Hacky, but possibly the easiest way: li { display: table-cell; vertical-align: center; } You will need to add a background image in

How to align two columns of text in CSS

阅读更多关于 How to align two columns of text in CSS

问题 I'm having some trouble lining up some text. I need two columns, one with numbers and one with text, like so: 1 Entry one 2 Entry two 3 Entry three 4 Entry five 5 Entry six The left column is Georgia and the right column is Arial (slightly different font sizes). I could have a container div for each row and absolutely position the number and text paragraphs to be at the top or bottom of these, which works fine. The problem is this means I have to give each row a fixed height so that it