Menu
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>
322
The CSS just sizes the div, vertically center aligns the span by setting the div's line-height equal to its height, and makes the span an inline-block with vertical-align: middle. Then it sets the line-height back to normal for the span, so its contents will flow naturally inside the block.
First, the <span> tag sets the height of <div> tag using the line-height property. The <span> also becomes an inline-block with the use of the vertical-align: middle. With <span> now an inline-block, it can be set at middle by using vertical-align: middle which works great for inline-block elements.
Text Align To center an inline element like a link or a span or an img, all you need is text-align: center . For multiple inline elements, the process is similar. It's possible by using text-align: center .
While changing display type of columns to table-cell may cause a trouble (e.g. 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:
EXAMPLE HERE
.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.
76
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
