So here is my markup. Solution has to work dynamically for a single line or double line in the span. So it should be css that can be added to each of these and work fine. From looking on the internez this seems to be impossible. Please prove me wrong.
<ul style="text-align:center; list-style-type: none;">
<li style="width: 200px">
<a href="http://www.bing.com" style="display: block; height:35px; background: Black;">
<span>Vertical Align This Text</span>
</a>
</li>
</ul>
<ul style="text-align:center; list-style-type: none;">
<li style="width: 200px">
<a href="http://www.bing.com" style="display: block; height:35px; background: Black;">
<span>Vertical Align This Text With Double Line As Well</span>
</a>
</li>
</ul>
This works for me:
<ul style="text-align:center; list-style-type: none;">
<li style="width: 200px; display: table">
<a href="http://www.bing.com" style="display: table-cell; height:35px; background: Black; vertical-align: middle; text-align:center">
<span>Vertical Align This Text</span>
</a>
</li>
</ul>
<ul style="text-align:center; list-style-type: none;">
<li style="width: 200px; display: table">
<a href="http://www.bing.com" style="display: table-cell; height:35px; background: Black; vertical-align: middle; text-align:center">
<span>Vertical Align This Text With Double Line As Well</span>
</a>
</li>
</ul>
CSS code for convenience:
ul {
list-style-type: none;
}
li {
width: 200px;
display: table;
}
a {
display: table-cell;
height: 35px;
background: black;
vertical-align: middle;
text-align: center;
}
Since your containing <a> have a set height value, you can use the ol' line-heighttrick of setting it to the same value, in this case:
a {
height:35px;
line-height:35px;
}
This will only work, though, if your <span> isn't wider than your <li>. In the case with the double line, you'd need to set the <line-height> to half the <a>'s height (35px height divided by 2 lines), so around 17px. If you had three lines, it would work with 35px/3 ~ 11px. But as you can imagine, it will look smooshed at one point.
So depending on the content you might have to with the relative/absolute positioning, a smaller font, or just less content ;)
Give your <li> and <a> the following CSS properties
li{
position:relative;
}
a{
position:absolute;
top:50%;
margin-top:-17px; /*negative half of your <a> tag height */
}
Check working example at http://jsfiddle.net/r4Wsx/
Related
How do you middle align text in a list item if the previous list item is heigher than it?
I have the following HTML code:
<ul class="list-inline">
<li style="background-color: aqua;">
<div style="height:50px;width:50px;background-color:green;display:block;"> </div>
</li>
<li style="background-color: lime;">
<div style="height:50px;background-color:green;display:block;">Brendan</div>
</li>
<li style="background-color: salmon;">Vogt</li>
</ul>
I am using Bootstrap. The first list item has to have a height and width of 50px. It is meant to be used for a colour. The second list item is plain text. The text is 10px in height.
I tried adding padding in the <li></li> but it doesn't work. I tried adding margin but this also doesn't work. I've tried adding the same to the <div></div> surrounding the text, also nothing happens. Seems like the padding and margin is added but overlaps the other elements so it looks like nothing happens.
How do I middle align the text?
PS: The styling is inline at the moment as I am playing around with it, will move it to an external style sheet later when everything works.
you can try this ..
.list-inline > li div {
margin: 10px;
padding: 14px;
}
here is the FIDDLE.
If you need vertical alignment you can use display: table-cell property. Since you already have ul and li they can be table and table-rows accordingly. In this case ul li > div would be table-cells which allow to use vertical-align: middle. You can additionally set text-align: center If needed.
.list-inline {
display: table;
width: 100%;
margin: 0;
padding: 0;
}
.list-inline li {
display: table-row;
}
.list-inline li > div {
display: table-cell;
vertical-align: middle;
height: 50px;
}
.list-inline li:nth-child(1) {
background-color: aqua;
}
.list-inline li:nth-child(2) {
background-color: lime;
}
.list-inline li:nth-child(3) {
background-color: salmon;
}
.myColor {
background-color: green;
width: 50px;
height: 50px;
}
<ul class="list-inline">
<li>
<div>
<div class="myColor"></div>
</div>
</li>
<li>
<div>Brendan</div>
</li>
<li>
<div>Vogt</div>
</li>
</ul>
Do you want all list items to appear in one row and to be vertically align center to each other?
If I understood your question correctly then this should help you -
<ul class="list-inline">
<li style="background-color: aqua; height:50px; width:50px; display:inline-block; vertical-align: middle;"> </li>
<li style="background-color: lime; display:inline-block; vertical-align: middle;"> Brendan </li>
<li style="background-color: salmon; vertical-align: middle; display: inline-block;"> Vogt </li>
</ul>
Use the css property inline-css for li it will work for you
<li style="text-align: center !Important;"
</li>
Or use line-height property
I ended up doing it like this:
<ul class="list-inline">
<li style="background-color: green;">
<div style="padding: 15px 23px;background-color: aqua;"> </div>
</li>
<li style="background-color: green;">
<div style="padding: 15px 0 15px 0;background-color: lime;">Brendan</div>
</li>
<li style="background-color: green;">
<div style="padding: 15px 0 15px 0;background-color: yellow;">Vogt</div>
</li>
</ul>
I needed the first colour block 50px high and wide. The is 4px wide and 20px high, hence the padding: 15px 23px;. The text in the other list items I'm not too worried about the length because the text can be varying length. I just set the hight. The text is 20px high hence the padding: 15px 0 15px 0;.
I'm not a CSS expert but this works for me :)
I put three HTML-elements in a row using inline-block: 2 images linking to external websites (green boxes in the image below) and one div-tag with a search-form an a language selection.
The problem is now, that next to the images - on their right sides - there is also a hidden link. To make it visible I set text-decoration:underline and a blue background in active mode (see image).
How can I limit the a href to only the images?
HTML code looks like that:
<div id="logo">
<a href="http://website1.example">
<img src="image1.gif">
</a>
<a href="http://website2.example">
<img src="image2.gif">
</a>
<div id="headermodules">
<form class="search" method="post" action="index.php">
<input type="text" value="Suchen...">
</form>
<div id="languageselection">
<ul class="languageselection">
<li id="active_language">
Deutsch
</li>
<li>
<a href="http://localhost:81/en/">English
</li>
</ul>
</div>
</div>
<span style="width: 100%;"></span>
</div>
The CSS looks like that:
#logo
{
position: relative;
height:129px;
text-align: justify;
z-index: 0;
border-top: 0px solid #000;
}
#logo img
{
display: inline-block;
vertical-align: middle;
}
#logo span
{
width: 100%;
height: 0;
display: inline-block;
}
#headermodules
{
display: inline-block;
vertical-align: middle;
}
You should have the a elements styled to inline-block and not the img. The img should be display: block. I think that should do it.
#logo a { display: inline-block; }
#logo img { display: block; }
I have a bunch of vertically aligned tab items in which and I can't seem to get the parent container (the <a href...> in my HTML) to expand to cover the child elements. I've tried using a <br style="clear: both"> and overflow: hidden;but the first didn't do anything and the second just cut it off (using auto just added a scroll bar, which doesn't help) any thoughts on how to fix it?
HTML sample:
<li class="active">
<a href="#pane1a" data-toggle="tab">
<div class="preview-box">
<img class="preview-image" src="img/monestary_floorplan.png">
<p id="previewcarousel1a"></p>
</div>
</a>
</li>
<li>
<a href="#pane1b" data-toggle="tab">
<div class="preview-box">
<img class="preview-image" src="img/bkg-img-home2.jpg">
<p id="previewcarousel1b"></p>
</div>
</a>
</li>
CSS:
.preview-box {
width: 90px;
height: 80px;
/*border: 2px solid red;*/
margin-left:auto;
margin-right:auto;
}
.preview-image {
display: block;
width: 75px;
height: 60px;
border: 4px solid #84be46;
margin-left:auto;
margin-right:auto;
}
.preview-items p{
color: #84be46;
text-align: center;
margin-top: 5px;
}
The whole site can be seen here
Adding display: inline-block; to your a element seems to solve your problem. You may have adjust padding/margin, though.
I've an unordered list like this:
<ul style="float:left;">
<li class="book">
<div>title sdfdfdsfdsfds sdfsdfsdf dsfsdfsdf fdgsdfsdf</div>
</li>
<li class="book">
<div>title</div>
</li>
</ul>
The height of the li should depend partially from the content of li(div height). But if the height of the inner DIV becomes higher than another div inside another li all the div should assume the same dimension of the larger div.
I tryed with:
div { height: auto; min-height: 100%; }
and setting the li
float: left;display: inline-block; height: 100px;
but nothing changed. If the content of the first DIV causes the div to resize, the other DIV will not assume the new 100% height. How can I solve this ?
In CSS, to automatically adjust things to the same height based on their content, they must be part of a table row. Try this:
<ul class="booklist">
<li class="book">
<div>title <br>sdfdfdsfdsfds <br>sdfsdfsdf dsfsdfsdf fdgsdfsdf</div>
</li>
<li class="book">
<div>title</div>
</li>
</ul>
.booklist { display: table; float: left; }
.book { display: table-cell; border: 1px solid gray; }
Note that unlike a set of inline-block items, table rows will not auto-wrap to multiple lines, so if that is your goal, you cannot accomplish this with CSS and must add some JavaScript, such as to adjust the heights.
Maybe I'm not understanding you but this:
all the div should assume the same dimension of the larger div.
is going to happen anyway.
If you are trying to maintain some consistency between the li elements try something like this:
li {float: left; width: 100px; border: 1px solid red; overflow: hidden; }
Try the following (put the li elements inside the div element):
<ul style="float:left;">
<li class="book" >
<div style="display: inline-block; height: 100px;">
title sdfdfdsfdsfds sdfsdfsdf dsfsdfsdf fdgsdfsdf
</div>
</li>
<li class="book" >
<div style="display: inline-block; height: 100px;">
title
</div>
</li>
</ul>
DISCLAIMER: inline styles there for ease of reference:)
I want to center four links in a div.
This is what I did so far: jsfiddle
Html:
<div id="menu">
<section>
<a class="top" href="#">Top</a>
<a class="left" href="#">Left</a>
<a class="right" href="#">Right</a>
<a class="bottom" href="#">Bottom</a>
</section>
</div>
Css:
#menu {
width: 200px;
height: 200px;
border: 1px solid #000;
background: #eee;
position: relative;
padding: 10px;
}
#menu>section {
position: absolute;
text-align: center;
width: 200px;
}
#menu a {
display: block;
vertical-align: middle;
height: 20px;
}
#menu .left {
float: left;
height: 160px;
}
#menu .right {
float: right;
}
#menu .bottom {
clear: both;
}
The problem is that the floated elements do not vertically centered as they should. I want the left and right elements to be in the middle and not at the top.
May be you can use line-height property for this. Like this:
#menu .left, #menu .right {
height: 160px;
line-height:160px;
}
http://jsfiddle.net/YdPzP/13/
try adding
.left, .right { line-height: 160px; }
Since you are already using html5, I would say aside tag would probably come in handy in your case:
here is a Sample
DEMO
You can use padding for vertically aligning the links
<div id="menu">
<section>
<a class="top" href="#">Top</a>
<div class="middle">
<a class="left" href="#">Left</a>
<a class="right" href="#">Right</a>
</div>
<a class="bottom" href="#">Bottom</a>
</section>
</div>
add the below css:
#menu div.middle{
height:90px;
padding-top:60px;
}
I ran into a seeming conflict between float:left; and vertical-align: middle;
In my case, I wanted several small images to line up horizontally. Some of them were the right size vertically and the others weren't tall enough, so i wanted to line up just those vertically that were the wrong vertical size.
Using a <ul>/<li> structure, I kept float:left; and dispay:inline; and it was ok in FF and IE 7,8,9, but not correct in Chrome and Safari. For some reason, the last image went to the next line even though there was ample room for it.
After eliminating completely float: left; the vertical-align: middle; then worked. Then it was just adding padding to line them up horizontally. Works now in all browsers.
Not sure why there is a conflict between float:left; and vertical-align:middle;
You may want to play with eliminating your float:left;