I'm trying to vertically center a text which is inside a div (.site-title), itself inside a div (.site-title-wrapper), and all of this inside another div (.site-header), which is the menu of the website.
Here are some pictures:
In green: .site-title-wrapper
In red: .site-title
and in white: .site-header
And I have the following CSS for these divs:
.site-title-wrapper {
display: table;
height: 100%;
position: absolute;
padding: 23px;
background-color: green;
}
and
.site-title {
font-family: "Roboto", sans-serif;
display: table-cell;
vertical-align: middle;
}
I've seen that using table and table-cell to vertically center a div inside another one was a good solution. It works fine, but the only thing I need to do is to force .site-title-wrapper to take all available height, so the green box goes down to the end of the white one (the menu).
The idea is to simply center the title with the menu elements.
I can't really change the html part, so I'm trying to fix it only with CSS.
Do you know how I can fix it?
.site-header{
width: 100%;
height: 100px;
border: 2px solid black;
}
.site-title-wrapper {
display: table;
height: 100%;
padding: 23px;
background-color: green;
}
.site-title {
font-family: "Roboto", sans-serif;
display: table-cell;
vertical-align: middle;
background-color: red;
}
<div class='site-header'>
<div class='site-title-wrapper'>
<div class='site-title'>
Some Text
</div>
</div>
</div>
EDIT: Here is a fiddle, in which what I tried works (I just removed the absolute) : https://jsfiddle.net/0xhL76gk/2/
Related
What would be the easiest way to center align an inline-block element?
Ideally, I don't want to set a width to the elements. This way depending on the text inputted within the elements, the inline-block element will expand to the new width without having to change the width within the CSS. The inline-block elements should be centered on top of one another (not side by side), as well as the text within the element.
See code below or see on jsFiddle.
The current HTML:
<div>
<h2>Hello, John Doe.</h2>
<h2>Welcome and have a wonderful day.</h2>
</div>
The current SCSS:
#import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,600);
body {
margin: 0 auto;
background: rgba(51,51,51,1);
font-family: 'Open Sans', sans-serif;
}
div {
width: 100%;
height: auto;
margin: 15% 0;
text-align: center;
h2 {
margin: 0 auto;
padding: 10px;
text-align: center;
float: left;
clear: left;
display: inline-block;
&:first-child {
color: black;
background: rgba(255,255,255,1);
}
&:last-child {
color: white;
background: rgba(117,80,161,1);
}
}
}
Adding a br between the two elements and taking out the float: left/clear: left may be the easiest way; however, I was curious if there was another way going about this.
Like this? http://jsfiddle.net/bcL023ko/3/
Remove the float:left left and add margin: 0 auto to center the element. Or is it something else that your are looking for?
Ok, so i have been looking around for someone with the same problem as me, but didn't find any(almost 100% shure some of you guys are going to link to to one).
I have managed to center a div inside a div which again is inside footer(pretty shure overkill). But my problem is that i have centered two images with two lines of text connected to them. I want the text to be displayed vertically centered(with the image in mind), and not in the bottom right corner of the images, like now.
Pretty shure it's something simple, but here is a link:
http://jsfiddle.net/rdsdmuw8/
<footer>
<div id="footer">
<div id="sosial">
<img src="bilder/telefon.jpg" style="height:50%;">
+47 930 98 907
<img src="bilder/mail.png" style="height:50%; margin-left:20%; margin-top:20px;">
Bryter-pedersen#hotmail.com
</div>
</div>
</footer>
*{
margin: 0px;
padding: 0px;
color: #fff;
}
footer {
width:100%;
height: 80px;
background-color: red;
}
#footer{
height: 100%;
}
#sosial {
text-align: center;
vertical-align: middle;
}
#sosial a{
list-style-type: none;
text-decoration: none;
}
In order to vertically align the img elements next to the anchors set vertical-align: middle for both of the elements.
#sosial img,
#sosial a {
vertical-align: middle;
}
In order to vertically center all the containing elements within the footer, you can use the table-cell/table approach.
#footer {
height: 100%;
width: 100%;
display: table;
}
#sosial {
text-align: center;
display: table-cell;
vertical-align: middle;
}
Updated Exmaple
I removed the inline CSS styling in the example. You can use img:nth-of-type() to apply the margin to the second element. Just throwing options out there.
#sosial img:nth-of-type(2) {
margin-left:50px;
}
if you know what is the height you want for the images you can use, in my example is 50px:
#sosial a {
list-style-type: none;
text-decoration: none;
line-height: 50px;
display: inline-block;
height: 100%;
vertical-align: middle;
}
I am writing an HTML page with CSS. At the top of my page I want to show a header with an image and text (image to the left of the text). The image size is 64 x 64 pixels and I want the text to be large.
I was able to do almost everything except I want to align the text at the bottom but, no matter what I do, I can't seem to get the text to stop placing itself at the top.
Here is the HTML for my header:
<div id="container" class="container">
<div class="header">
<div class="header image"></div>
<div class="header text">Header Text</div>
</div>
</div>
and here is the CSS;
.container .header {
height: 65px;
border:2px solid red;
}
.container .header .image {
background: url("../images/icon64.png") no-repeat;
float: left;
display: inline-block;
width: 65px;
border:2px solid green;
}
.container .header .text {
float: left;
display: inline-block;
vertical-align: bottom;
font-family: sans-serif;
font-size: x-large;
border:2px solid blue;
}
I have been reading several web pages after searching for how to do this. I found one page that seemed pretty straight forward. They said you have to use inline-block for the display property in order for vertical-align to be honored.
I changed my CSS to what you see above but that still did not work. Here is what my header looks like:
(Note the border coloring is just for visualizing what's going on.)
Can anyone tell me what I am doing wrong and how to fix it so that my text is vertically aligned at the bottom?
Thank you.
That is correct, set elements as inline-blocks and use vertical-align. However, that means not to float the elements! Floated elements are floats and you negate the display: inline-block declaration: http://jsfiddle.net/qQtG9/2/ (I've cleaned your code some).
HTML:
<div class="header">
<div class="image"></div><div class="text">Header Text</div>
</div>
CSS:
.header {
border:2px solid red;
}
.header .image {
background: url("http://placehold.it/64x64")
no-repeat;
width: 65px;
height: 65px;
border:2px solid green;
}
.header .text {
font: x-large sans-serif;
border:2px solid blue;
}
.header .image,
.header .text {
display: inline-block;
vertical-align: bottom;
}
You can also try giving the #header a position:relative
and then give the .text position absolute, so if you give bottom:0; it will be stack to the bottom of the #header div
Alright, this one should be pretty easy for you front-end guys out there. I have the styled purple link all set to go. I'm just having trouble getting the vertical line to look OK. Assume the line is 1px #000 solid
I kind-of got it working making a div w/ a bottom-border and floating the styled link to the right. If I do that, I can't seem to get there to be space between the divider line and the link.
The following involves some extra markup and uses table-cells.
HTML:
<div class="wrapper">
<span class="leader">
<b></b>
</span>
<span class="cell">
<button>Sample Button</button>
</span>
</div>
CSS:
.wrapper {
border: 1px dotted gray;
display: table;
width: 100%;
}
.wrapper .leader, .wrapper .cell {
display: table-cell;
vertical-align: middle;
}
.wrapper .leader {
width: 100%;
padding: 0 10px;
}
.wrapper .leader b {
display: block;
border-bottom: 1px solid red;
}
.wrapper button {
white-space: nowrap;
}
Demo at: http://jsfiddle.net/audetwebdesign/8aSBA/
There are a few advantages to this approach:
You can control the spacing to the left and right of the horizontal line
Vertical alignment is independent of font-size, line-height
You don't need to specify the width of the button
You can use a :before selector in css, though im not sure is compatable in < ie7
.button:before {
background: none repeat scroll 0 0 #000000;
content: "";
float: left;
height: 1px;
margin-top: 12px;
width: 59%;
}
I have fixed height divs that contain text in them. I would like the text to be vertically aligned in the middle of the div, but the problem lies in the fact that some of the text is single-line, and some splits itself over onto two lines. For IE8, Chrome and Firefox, using display: table-cell and vertical-align: middle provides the solution I need:
JS Fiddle is here. Take the asterisk off the width: 300px to see the formatting when the text is on one line.
However, IE7 does not support the display: table-cell property. The only solutions I have found to this apply only to single lines, and not to text that may be 1 or 2 lines. How can I have it display in IE7 as it does in more modern browsers, without the use of any scripts?
How about an IE7 CSS call putting position:relative on the div, and absolute on the h6, and keep the code for vertical-align for modern browsers.
http://jsfiddle.net/yap59cn3/
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="ie7.css">
<![endif]-->
ie7.css
div
{
/* Use inheritance, and override only the declarations needed. */
position:relative;
}
h6
{
height:auto; /* override inherited css */
position:absolute;
top:45%;
}
The goal is to make IE7 "presentable" -- no matter what you do, it will never look as pretty as a modern browser. To me, it's not worth the headache (not even a little).
Personally I've started to (ab)use padding to get vertical aligns. It's especially handy if you use fixed height, since you can offset the height with the value of the padding to get a perfect full-height element.
Note: This solution only works if you know what text will come in the <h6> in advance. If you dynamically add it, I'd suggest wordcounting to try to figure out if it's gonna wrap or not.
Solution:
HTML
<div>
<h6 class="OneLineVertCentered">Here is some text. Look at this lovely text. Isn't it nice?</h6>
</div>
<div style="margin-top: 1em;"> <!-- Margin only for displaying the boxes properly -->
<h6 class="TwoLineVertCentered">Here is some text. Look at this <br />
lovely two-line text. Isn't it nice?</h6>
</div>
CSS
div {
background-color: yellow;
height: 30px;
width: 200px;
width: 300px;
}
h6.OneLineVertCentered,
h6.TwoLineVertCentered {
font-size: 12px;
line-height: 1em;
}
h6.OneLineVertCentered {
padding-top: 10px;
}
h6.TwoLineVertCentered {
padding-top: 3px;
}
Fiddle:
http://jsfiddle.net/Snorbuckle/CnmKN/
Snippet (same as fiddle):
div {
background-color: yellow;
height: 30px;
width: 200px;
width: 300px;
}
h6.OneLineVertCentered,
h6.TwoLineVertCentered {
font-size: 12px;
line-height: 1em;
}
h6.OneLineVertCentered {
padding-top: 10px;
}
h6.TwoLineVertCentered {
padding-top: 3px;
}
<div>
<h6 class="OneLineVertCentered">Here is some text.
Look at this lovely text. Isn't it nice?</h6>
</div>
<div style="margin-top: 1em;">
<h6 class="TwoLineVertCentered">Here is some text. Look at this <br />
lovely two-line text. Isn't it nice?</h6>
</div>
You can use a helper span element to vertical align your text like the following example:
html
<div class="container">
<span class="aligner"></span>
<h3>Text to be aligned center in the beloved ie7</h3>
</div>
css
div.container {
background-color: #000;
color: #fff;
height: 300px;
width: 250px;
position:relative;
margin:12px auto;
text-align:center;
}
.aligner {
display: inline-block;
height: 100%;
content: ' ';
margin-right: -0.25em;
vertical-align: middle;
}
h3 {
display: inline-block;
vertical-align: middle;
}
Fiddle: http://jsfiddle.net/groumisg/dbx4rr0f/
Normally, we would use a pseudo element for this, but ie7 (what a surprise!) does not support :after, :before...etc. Also, note that ie7 does not support display: inline-block for elements that are not inline by default, like div. To use display: inline-block for a div you would have to use the following hack:
div {
display: inline-block;
*display: inline;
zoom: 1;
}
as suggested here Inline block doesn't work in internet explorer 7, 6
You should be able to accomplish this with line-height and vertical-align: middle;.
div {
background-color: yellow;
height: 30px;
line-height: 30px;
width: 200px;
*width: 300px;
}
h6 {
font-size: 12px;
line-height: 1em;
height: 30px;
vertical-align: middle;
}
check this out
http://jsfiddle.net/CnmKN/59/
CSS Code
div {
background-color: yellow;
height: 30px;
width: 200px;
*width: 300px;
display:table;
}
h6 {
font-size: 12px;
line-height: 1em;
display: table-cell;
vertical-align: middle;
height:90px;
}
I know two other methods to vertically center elements than with table-cell:
1) With line-height:
.element {
height: 60px;
line-height: 60px
}
This will only work if the text is in a single line.
2) position absolute/margin auto
.parentElement {
position: relative;
}
.element {
position: absolute;
top: 0;
bottom: 0;
margin: auto 0;
}
You maybe will have to use height (auto or a value) and display inline/inline-block. Just try.
Key point is not to use pixels for alignment, use only %-s.
Works even on IE5 :)
here is Demo
.wrapper{
position: relative;
width: 100%;
height: 200px; /* change this value to see alignment*/
background-color: red;
margin: 0 auto;
}
.cell{
position: absolute;
display:block;
background-color: blue;
left:50%;
top:50%; /*this puches element half down*/
margin-left:-100px; /* this is the half size of cell width:200px;*/
margin-top: -.5em; /*this is the half size of font size*/
width: 200px;
color: #fff;
text-align:center;
}
<div class='wrapper'>
<div class='cell'>vertically aligned text</div>
</div>
div {
background-color: yellow;
height: 400px;
width: 200px;
display: table-cell;
vertical-align: middle;
width: 300px;
}
h6 {
font-size: 12px;
line-height: 1em;
height: 30px;
}