I'm trying to centre three divs vertically inside another div vertically. I'm trying the technique described here on CSS Tricks and demonstrated here: to add a pseudo-element :before the container:
.author-page-box:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em;
}
and give the child divs a vertical align of middle:
.aub-img,
.aub-main,
.aub-contact-links {
display: inline-block;
vertical-align: middle;
}
But my attempt to make this work doesn't work! Can anyone tell me where I'm going wrong? (JSFiddle).
====================
Edit:
Here's what my layout looks like, not vertically centred!
Something like this? Vertically Centered Example
You had the right idea but were adding
vertical-align: middle;
to the wrong divs.
Related
I cant seem to get the BOOKS to vertically align in the middle when I added vertical-align: middle; but I must be missing something? Can someone please help me out.
http://jsfiddle.net/wz9xzu2v/1/
You need to set vertival-align:middle to img tag.
#menu ul > li img {
display: inline;
border: 1px;
margin: auto;
vertical-align: middle; // <- added this
}
http://jsfiddle.net/wz9xzu2v/5/
Or you can also provide line-height of equal height of that image height to that specific . it will put your text in center vertically.
li.img-text {line-height:35px;}
I know that this has been asked a thousand times before and I apologise for asking again, but I haven't been able to figure this out after a few minutes of searching.
I am trying to centre an anchor element within a div element both horizontally and vertically. The basis for this question is as follow.
<div></div>
<div></div>
<div>
Hello
</div>
<div></div>
<div></div>
div {
width: 100px;
height: 100px;
background-color: teal;
box-sizing: border-box;
margin: 10px;
float: left;
text-align: center;
display: table-cell;
vertical-align: middle;
}
a {
color: white;
text-decoration: none;
font-style: 14px;
}
Now, I know that I can use text-align: center; on the containing div to centre the anchor element horizontally and that I can use display: table-cell; vertical-align: middle; on the div to align it vertically but it doesn't seem to work together, especially when the div is set to float left.
How can I achieve this rather simple layout? Also, please elaborate on why what I'm trying doesn't work as I'd like to learn rather than just fix this.
I would prefer not to use line-height since it breaks with multi-line text.
http://jsfiddle.net/xHLze/2/
You basically listed the answer in your question, though you may just need to apply the styles to a few different places:
I put display: table; on the containing <div>, allowing me to set display: table-cell; on the <a> element, after which I can apply vertical-align: middle; to vertically center the text.
I then applied text-align: center; to the <a> element to horizontally center it.
http://jsfiddle.net/3RfgD/
What I believe you missed is that you should be setting display: table; on the table-cell elements parent in order for it to work properly. (an element cannot act as the cell of a table if it is not in a table, whether it's an actual table or a CSS one)
Use margin for your anchor tag to auto align it in the center of your div tag like this:
a{margin:0 auto;}
This automatically centralizes your text both vertically and horizontally. :) but since anchor tag is inline tag we need to specify it with respect to the div tag like this
div a {display:block;
width:50px;}
where 50px is with respect to div's width. Check out here why margin 0 auto doesn't work
Could you help me align vertically (on blue background) text and icons (fb, etc) ?
I tried to use vertical-align, display:table, etc. But it didn't solve my problem.
http://tinyurl.com/pe4avff
Please help me. Thanks!
You probably didn't use display and vertical-align properties in the right way.
Use the following styles:
.align {
display: table;
height: 100%;
...
}
.vertical {
display: table-cell;
vertical-align: middle;
}
Also notice that this is a common practice for vertical alignment, but not the only one.
You could also do:
.vertical {
display: table-row;
line-height: 2em;
}
Which is basically setting line-height of the text in your div to the same value as your divs height.
Remove float: left from CSS classes bar-menu-left, bar-menu-right and bar-icons.
If what you want to do is to vertically align all text and icons you should remove
float:left; from the .bar-menu-left, .bar-menu-right and .bar-icons classes.
I am wanting to make my website have a similar layout to this one here: http://www.mathewporter.co.uk/ but none of my div's are lining up the right way. I have tried using but that didnt work out right. As you can see on the JSFiddle here: http://jsfiddle.net/vf4Wu/1/ using the css:
div.sidebar{
margin-top: 25px;
margin-left: 150px;
display: inline;
}
div.content{
display: inline;
}
div.content h2{
display: inline;
}
Thanks, Im not sure if im asking this right or not. But what should I be using if not divs?
Use:
display: inline-block;
Inline items cannot accept top/bottom margin and padding.
Use float for each contanier or display: inline-block
Firstly my CSS skills are... a work in progress. But I have got so far in as to successfully have a bunch of list items arranged in a grid. http://jsfiddle.net/ashanova/Y4SR3/2/
What I'd like to do now is centre the list items. I have tried to replace float with inline but it causes the width and height of each item to collapse. I would also like to centre the text horizontally and vertically within each list item as well, ideally ellipsisizing (not a word) overflow text. As one last specification I would like to only modify CSS to the ul and its children if thats possible.
While the language gets a little unclear when you're dealing with multiple parent and child elements, and centering (/middling) on 2 axes, I think that if the other answers aren't what you're looking for, you might actually want display: table-cell.
Check this fiddle.
If you give your li elements display: table-cell, text-align: center and vertical-align: middle, I think the text will arrange itself appropriately. Unfortunately, table-cell elements don't accept margin, so I added a 10px border instead.
In order to accomplish truncation of text that overflows and the insertion of an ellipse, you'll need to use some kind of javascript.
UPDATE
Having learned more about what you're after through the many other answers and comments, I've come up with a better solution here: http://jsfiddle.net/crowjonah/jx8sD/
What you need to do is insert <a class="list-item"> tags inside the li elements, and use this CSS:
.tile li {
background-color: white;
display: block;
float: left;
margin: 10px;
overflow: hidden;
}
.tile li a.list-item{
display: table-cell;
vertical-align: middle;
height: 75px;
text-align: center;
width:75px;
}
Text-align: center will align your list items to the center. Vertical-align: text-top will align items to the center vertically.
vetical-align will not actually do the job in this case. I wish it were that simple.
This aricle will give you some insight into the problem and will help you solve it:
Understanding vertical-align, or "How (Not) To Vertically Center Content"
This will do what you want. Borders on inline-block items are a pain, so I'm using a border to make it look right.
.tile li {
background-color: white;
display:inline-block;
border: 10px solid red;
width: 75px;
height: 75px;
text-align:center;
display:table-cell;
vertical-align:middle;
overflow: hidden;
}