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.
Related
I know how to align text vertically inside a div, but I am unsure on how to do it if the div has a percentage height and width. Here is my code:
<div id="header">
<h1>Home</h1>
</div>
#header {
background-color: red;
color: white;
text-align: center;
vertical-align: middle;
width: 100%;
height: 15%;
}
Now on my webpage the text in the div has been aligned correctly horizontally but not vertically. How do I fix this problem? Can you also try to explain your answers and keep them as simple as possible please (I'm still relatively new at HTML/CSS). Thank you.
You can use the flexbox model to easily center things.
Just add the following rules to your container:
display:flex;
justify-content: center; //horizontal centering
align-items:center; //vertical centering
FIDDLE
Note this is probably a more general solution than what you expected, but what's really cool about flexbox is that it works in many different cases, including yours (example with an h1 tag here).
Try giving display:inline-block to your h1 tag.
DEMO
You can just add:
display:inline-block
to your h1
example: http://jsfiddle.net/24pwprvf/
Add line-height matching the height of the container:
#header {
background-color: red;
color: white;
text-align: center;
vertical-align: middle;
width: 100%;
height: 15%;
line-height: 0.15em;
}
You should not use line-height for the effect you desire as suggested by Praveen Above.
You can get the same affect by either putting, 'display: inline-block' in either the #header div or in the #header h1 css style.
the first part is not advisable.Best practice will be to use it in the h1 style only.
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.
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;
}
Please see this jsfiddle: http://jsfiddle.net/LGzdf/
What I want to do is some how vertically align the text to 50% if there is only 1 lines worth of text.
But if there is two lines, with just css, it should fill the entire space having a height equal to the image.
Ideas? Thanks
You may find this article useful.
Play around with something like this:
.mod-item {
...
overflow:hidden;
}
.story {
height:30px;
display: table;
}
.mod-item .title {
display: table-cell;
vertical-align: middle;
height: 30px;
}
Demo