CSS questine
- Started
- Last post
- 13 Responses
- benfal99
I have a div set to :
.splash-header {
background-color: #FFF;
width: 100%;
height: 100vh;
text-align: center;
display: inline-block;
max-width: 100%;
}I want text to be vertically centered and horizontally.
HOW?
- chow0
What's in the element? If it's just a single line of text without linebreaks, you can vertically center it by setting line-height to the same as height.
Otherwise, you'll need to use one of the techniques described here: https://css-tricks.com/centering…
- pinkfloyd0
This is why I hate css.
- benfal990
@chow.. i can't manage to make it work..
Can you take a look at my page here http://goo.gl/qJxFUe and tell me exactly what i need to do? The word needs to be centered on splash image.
hell!
- Nathan_Adams0
You either need a bunch of nested divs and fake a table cell within a table layout to make vertical-align: middle work, or I believe you can do it with flexbox.
- benfal990
geezus... how can something so simple be so complicated? ...
- Milan0
no shit, I can't believe it's 2015 and there's still no simple way of doing this
- vwsung18t0
You have a div and spans nesting the text. Can you just have one span and set the line height to 100vh?
Flexbox would be easy if you didn't need full browser support.
You can also do a little javascript and position: absolute the text.
- chow0
.splouche1-text-box {
position: absolute;
top: 50%;
width: 100%;
height: 100px;
line-height: 100px; /* same as height */
margin-top: -50px; /* half of height */
padding-top: 0;
text-align: center;
}Please tell me where to send the invoice.
- benfal990
sorry chow.. doesnt work at all
- Sure it does. Try replacing the selector with .splash-header > .splouche1-text-boxchow
- Otherwise send me a link to the broken page with my CSS snippetchow
- check the updated page with yourcode here: http://goo.gl/qJxFUe… dont render the same on the server VS Dreamweaver in-Chrome previewbenfal99
- 1. I don't see my code anywhere on that page. 2. Don't use Dreamweaver.chow
- always easy to blame Dreamweaver - why? Its a code editor like anything else - just avoid the WYSIWYGfadein11
- vwsung18t0
.splash-header{
background-color: #FFF;
width: 100%;
height: 100vh;
max-width: 100%;
background-image: url(ALCORA_dno2-1277.jpg);
background-repeat: no-repeat;
background-position: center top;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
margin-bottom: -5px;display: table;
}.splouche1-text-box {
margin: auto;
text-align: center;
display: table-cell;
vertical-align: middle;
}
- benfal990
THANK YOU vwsung18t !!!!1! it work!!
thanks a lot too chow!!