I know this got asked a lot here, but all the methods I am trying seem not to work for my code for some reason.
I want to vertically align the text in the elements
HTML:
<div id="mainWrapper">
<div id="header">
<div id="logo" class="headerElements">
<h:outputText class="headerText" value="RedPrice" />
</div>
<div id="login" class="headerElements">
<h:outputText class="headerText" value="Login" />
</div>
<div id="register" class="headerElements">
<h:outputText class="headerText" value="Register" />
</div>
<div id="follow" class="headerElements">
<h:outputText class="headerText" value="Follow us" />
</div>
</div>
</div>
CSS:
*{
margin:0;
padding:0;
}
body,html {
height: 100%;
font-family: 'Quicksand', sans-serif;
}
div#mainWrapper {
height: 100%;
width: 100%;
background: url(../images/women.jpg) no-repeat center center;
}
div#header {
width: 100%;
height: 5%;
background: white;
opacity: 0.5;
}
div.headerElements {
float: left;
height: 100%;
width: 10%;
text-align: center;
}
div.headerElements:hover {
background: orangered;
opacity: 0.5;
}
.headerText {
font-size: x-large;
}
What I have already tried: (unsuccesfully)
display: table-cell
ul
and lis
and setting display:table and display:table-cell Can somebody provide me with a solution?
You can use
div.headerElements:before {
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
}
Demo (Note: I have increased wrapper's height to see it better)
Based on http://css-tricks.com/centering-in-the-unknown/ , read it for a full explanation.
Here is another suggestion, but I am not certain I understand the question.
div {
height: 40px;
line-height: 40px;
vertical-align: middle;
}
I ended up using flex container. So in this example, change the CSS for div#mainWrapper to this:
div#mainWrapper {
height: 100%;
width: 100%;
background: url(../images/women.jpg) no-repeat center center;
display: flex;
align-items: center;
}
Yo can use this way also -
1 :- Html part
<div>
<h1>try me</h1>
</div>
2 :- Css Part
div {
background: #000;
color: #FFFFFF;
height: 30px;
display: table;
width: 100%;
text-align: center;
}
div > h1 {
display: table-cell;
text-align: center;
vertical-align: middle;
}
Try replacing your actual css "div.headerElements" by this one (just deleted "float: left;"):
div.headerElements {
height: 100%;
width: 10%;
text-align: center;
}
You can use clear:both;
to achieve that. Something like this:
div.headerElements {
float: left;
height: 100%;
width: 10%;
clear: both;
text-align: center;
}
Check this JSFiddle to illustrate this implementation.
The most simple and easy to use solution imo.. also the safest unless you're support IE8
is:
HTML
<h2>
<span>30 mins</span>
</h2>
CSS
h2 {
height: 120px;
position: relative;
}
h2 span {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
Mr Fiddle
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.