vertical-alignment | 易学教程

How to set the margin or padding as percentage of height of parent container?

阅读更多关于 How to set the margin or padding as percentage of height of parent container?

I had been racking my brains over creating a vertical alignment in css using the following .base{ background-color:green; width:200px; height:200px; overflow:auto; position:relative; } .vert-align{ padding-top:50%; height:50%; } and used the following div structure. <div class="base"> <div class="vert-align"> Content Here </div> </div> While this seemed to work for this case, i was surprised that when i increased or decreased the width of my base div, the vertical alignment would snap. I was expecting that when I set the padding-top property, it would take the padding as a percentage of the

Why does this inline-block element have content that is not vertically aligned

阅读更多关于 Why does this inline-block element have content that is not vertically aligned

问题 Came across a weird CSS issue. Can someone explain why the box having content is not vertically aligned? If you put text inside the span with class .divPutTextToFixIssue - it aligns properly. http://jsfiddle.net/KgqJS/88/ #divBottomHeader { background-color: #d5dbe0; height: 43px; } .divAccountPicker { display: inline-block; background: blue; width: 200px; height: 40px; } .divAccountData { display: inline-block; background: red; width: 400px; height: 40px; } <div id=\"divBottomHeader\"> <div

Best way to center a <div> on a page vertically and horizontally? [duplicate]

阅读更多关于 Best way to center a on a page vertically and horizontally? [duplicate]

问题 This question already has answers here : How to center an element horizontally and vertically (19 answers) Closed 11 months ago . Best way to center a <div> element on a page both vertically and horizontally? I know that margin-left: auto; margin-right: auto; will center on the horizontal, but what is the best way to do it vertically, too? 回答1: The best and most flexible way My demo on dabblet.com The main trick in this demo is that in the normal flow of elements going from top to bottom, so

How do I vertically center text with CSS? [duplicate]

阅读更多关于 How do I vertically center text with CSS? [duplicate]

问题 This question already has an answer here: How to center an element horizontally and vertically 19 answers I have a div element which contains text, and I want to align the contents of this div vertically center. Here is my div style: #box { height: 170px; width: 270px; background: #000; font-size: 48px; color: #FFF; text-align: center; } <div id=\"box\"> Lorem ipsum dolor sit </div> What is the best way to do this? 回答1: You can try this basic approach: div { height: 90px; line-height: 90px;

CSS vertical alignment of inline/inline-block elements

阅读更多关于 CSS vertical alignment of inline/inline-block elements

问题 I\'m trying to get several inline and inline-block components aligned vertically in a div . How come the span in this example insists on being pushed down? I\'ve tried both vertical-align:middle; and vertical-align:top; , but nothing changes. HTML: <div> <a></a><a></a> <span>Some text</span> </div> CSS: a { background-color:#FFF; width:20px; height:20px; display:inline-block; border:solid black 1px; } div { background:yellow; vertical-align:middle; } span { background:red; } RESULT: FIDDLE

How to vertically center a container in Bootstrap?

阅读更多关于 How to vertically center a container in Bootstrap?

问题 I\'m looking for a way to vertically center the container div inside the jumbotron and to set it in the middle of the page. The .jumbotron has to be adapted to the full height and width of the screen. The .container div has a width of 1025px and should be in the middle of the page (vertically center). I want this page to have the jumbotron adapted to the height and width of the screen along with the container vertically center to the jumbotron. How can I achieve it? .jumbotron { height:100%;

How to align content of a div to the bottom

阅读更多关于 How to align content of a div to the bottom

问题 Say I have the following CSS and HTML code: #header { height: 150px; } <div id=\"header\"> <h1>Header title</h1> Header content (one or multiple lines) </div> The header section is fixed height, but the header content may change. I would like the content of the header to be vertically aligned to the bottom of the header section, so the last line of text \"sticks\" to the bottom of the header section. So if there is only one line of text, it would be like: ----------------------------- |

How to vertically align an image inside a div

阅读更多关于 How to vertically align an image inside a div

问题 How can you align an image inside of a containing div ? Example In my example, I need to vertically center the <img> in the <div> with class =\"frame \": <div class=\"frame\" style=\"height: 25px;\"> <img src=\"http://jsfiddle.net/img/logo.png\" /> </div> .frame \'s height is fixed and image\'s height is unknown. I can add new elements in .frame if that\'s the only solution. I\'m trying to do this on Internet Explorer 7 and later, WebKit, Gecko. See the jsfiddle here. .frame { height: 25px; /

How do I vertically align text in a div?

阅读更多关于 How do I vertically align text in a div?

问题 I am trying to find the most effective way to align text with a div. I have tried a few things and none seem to work. .testimonialText { position: absolute; left: 15px; top: 15px; width: 150px; height: 309px; vertical-align: middle; text-align: center; font-family: Georgia, \"Times New Roman\", Times, serif; font-style: italic; padding: 1em 0 1em 0; } <div class=\"testimonialText\"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore

Vertically align an image inside a div with responsive height

阅读更多关于 Vertically align an image inside a div with responsive height

问题 I have the following code which sets up a container which has a height that changes with the width when the browser is re-sized (to maintain a square aspect ratio). HTML <div class=\"responsive-container\"> <div class=\"dummy\"></div> <div class=\"img-container\"> <IMG HERE> </div> </div> CSS .responsive-container { position: relative; width: 100%; border: 1px solid black; } .dummy { padding-top: 100%; /* forces 1:1 aspect ratio */ } .img-container { position: absolute; top: 0; bottom: 0;