Vertical align span text inside inline-block div
Question
I am building a website with a flat design. I have a header and under it two different coloured blocks next to each other. I tried float left and right but was advised to use display: inline-block instead.
I ran into an issue, though. I want to place some text right in the middle of both the left and right block and tried to use the align-items: center, but figured out that only works if the div is set to flex.
So my question is, can I somehow keep my inline-block and get my text centered in the middle of my blocks (both horizontal and vertically)?
body { margin: 80px 0 0; } #pagewrapper { width: 100%; } #header { width: 100%; height: 80px; background-color: #008B8B; position: fixed; top: 0; } .content-left, .content-right { width: 50%; height: 500px; color: #FFFFFF; display: -moz-inline-stack; display: inline-block; zoom: 1; *display: inline; } .content-left { background-color: #66CC99; } .content-right { background-color: #20B2AA; } #header-bot { height: 800px; background-color: #F8F8FF; } #footer { height: 50px; background-color: #AFEEEE; } .title { font-size: 18px; }
<body> <div id="pagewrapper"> <div id="header"> </div> <!-- End of Header --> <div class="content-left"> <span class="title">This is left Content</span> </div> <!-- End of Content Left --> <div class="content-right"> <span class="title">This is Right Content</span> </div> <!-- End of Content Right --> <div id="header-bot"> </div> <!-- End of Header-Bot --> <div id="footer"> </div> <!-- End of Footer --> </div> <!-- End of PageWrapper --> </body>
2 answers
solution1
13 ACCPTED 2014-08-23 07:13:10
While changing display type of columns to table-cell may cause a trouble (eg the effect of relative positioning is undefined for table-cell elements) another option is adding a full-height (pseudo-)element into the columns and align that and the <span> element vertically by vertical-align: middle; declaration:
.content-left,
.content-right { text-align: center; } /* Align inline children horizontally */
.content-left:after, .content-right:after {
content: "";
display: inline-block;
vertical-align: middle; /* Align inline level elements vertically */
height: 100%;
}
.title {
vertical-align: middle; /* Align inline level elements vertically */
}
For further details, you could refer to my answer here.
solution2
2 2014-08-23 03:01:54
On your .content-left and .content-right divs change the display to table and add a text-align of center. For the .title spans, change the display to table-cell and add a vertical-align of middle;
.content-left, .content-right {
display: table;
text-align: center;
}
.title {
display: table-cell;
vertical-align: middle;
}
Here's a jsfiddle to demonstrate (I changed the divs to have a height of 200px so it's easier to see the centering effect in the smallish jsfiddle window)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.