I have the following layout:
<ul>
<li>Text
<div class="task"></div>
</li>
</ul>
See fiddle. I am having problems aligning the text Text. Now it is on the same line as the div. I would like to align (vertically) the Text to the middle of the div. I have tried nesting the Text inside a span and giving the span margin-bottom, padding-bottom, but nothing seems to work.
Beware of spacing issues with inline-block - http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/
http://jsfiddle.net/6AxbH/1/
.task {
display:inline-block;
vertical-align: middle;
}
.task {
height:20px;
width:20px;
background-color:red;
display:inline-block;
text-align:center;
float:none;
}
ul li {
text-align:center;
width:50px;
display:block;
list-style:none;
}
I just set a width on the LI to match what the size of the box was (then reduced the size of the box to make sure it centered) and applied display:block;text-align:center; to center everything.
Related
What simple CSS mistake am I making?
I have a number of images setup in a ul as part of a gallery, each with a hover over text box
For everything except mobile breakpoints, I'd like them (the thumbnail versions) to line up 4 across.
By setting the width to 25%, I thought the following would handle that, but it's breaking it into 3 across with a bunch of space on the right side of the container - as if there was padding on the container or margin on the images forcing a new row.
There also appears to be a small amount of margin or padding on all sides of the image. I've double checked each element through the browser and there is no margin or padding being applied from some other rogue style that I may have missed.
JSFiddle Example Here
UPDATE: On my fiddle example, the hover-over text box is clearly going beyond the right edge of the image, but the css sets it's width at 100%. Do I just have my positioning screwed up?
Link to live page at www.deckdoctors.net/bay-area-deck-ideas.html
Abridged HTML:
<div id="gallery">
<ul class="nivo">
<li>
<a href="full-size-image.jpg"><img src="thumbnail-image.jpg">
<span>Some overlay text</span></a>
</li>
<li>
<a href="full-size-image.jpg"><img src="thumbnail-image.jpg">
<span>Some overlay text</span></a>
</li>
<li>
<a href="full-size-image.jpg"><img src="thumbnail-image.jpg">
<span>Some overlay text</span></a>
</li>
<li>
<a href="full-size-image.jpg"><img src="thumbnail-image.jpg">
<span>Some overlay text</span></a>
</li>
</ul>
</div>
Abridged CSS:
#gallery {
width:100%;
padding:0;
}
#gallery ul {
list-style:none;
margin:0;
padding:0;
}
#gallery ul li {
display:inline;
position:relative;
margin:0;
padding:0;
}
#gallery ul li span {
visibility:hidden;
position:absolute;
width:100%;
left:0;
bottom:0px;
z-index:3;
background:rgba(0,0,0,.6);
color:#FFF;
text-align:center;
}
#gallery ul li:hover span {
visibility:visible;
}
#gallery ul li a img {
width:25%;
margin:0;
padding:0;
}
Here's the issue:
Inline elements will have spaces after them which makes the last item on the row drop to the next line, so if you set a width of 25%, you'd need to counter for the spaces produced after each <li>.
A better way to do this would be to use float: left (which makes elements 'block-level') on the <li> and set it's width to 25%.
eg.
ul li {float: left; width: 25%}
See this fiddle: http://jsfiddle.net/pavkr/685m0b5z/
Also see this screenshot of it in action on your website:
Here's my fix: http://jsfiddle.net/3rmzz59m/1/
I believe the problem is related to the inline lis; sizing is a bit weird when it comes to inline elements. By changing them to inline-block and setting the width on the li elements instead, the extra spacing around them goes away.
Make the width of images 24% instead of 25%
#gallery ul li a img {
width:24%;
margin:0;
padding:0;
}
also set text-align:center for Gallery:
#gallery {
width:100%;
padding:0;
text-align: center;
}
Checkout this DEMO: http://jsfiddle.net/3rmzz59m/2/
Here's my stripped-down code:
<style>
div{
height:100px;
background-color:black;
}
span{
font-size:60pt;
background-color:yellow;
}
img{
height:100px;
background-color:yellow;
}
</style>
<div>
<span>ASDF</span>
<img src="foo"/>
</div>
(fiddle: http://jsfiddle.net/pM2jE/)
How come the "ASDF" is misaligned with the rest of the DIV??
I suspect, somehow, that the bottom of the word "ASDF" is aligning with the rest of the DIV, and so the SPAN as a whole doesn't actually match up. I have no idea how to fix this.
Add this css to your image class
vertical-align: top;
By default, the vertical-align for a span is "baseline", which will align the contained text to the bottom of the parent container. Adding a:
vertical-align: top;
CSS property will align the top of the text to the top of the containing div.
use float:left or float: right in your this might help you align your span and div
I've been battling this a few hours. The text in this span is mysteriously aligned to the top of the span. Here is a screenshot from Firebug:
And here are my related CSS blocks:
.skills {
overflow:hidden;
height:100%;
}
.skills li{
border-bottom:1px dotted black;
position:relative;
width:200px;
height:18px;
margin-left:13px;
}
.skills li span{
display:inline-block;
position:relative;
background:white;
bottom:0px;
height:100%;
padding:0 5px;
}
Here is the HTML:
<h4 class="main-heading"><span>Data Exchange</span></h4>
<ul class="skills">
<li>
<span>SOAP/Axis2</h4>
</li>
</ul>
Can you tell why this is aligned to the top? I want it in the center.
And here is the jsFiddle, where the same code results it in text being in the center. Does that mean that CSS elements higher in the hierarchy may be causing it?
...where the same code results it in text being in the center. Does
that mean that CSS elements higher in the hierarchy may be causing it?
I imagine that an ancestor in your actual stylesheet has the line-height set to less than 18px. You can look at the calculated line height for that element in your actual stylesheet to see what value was being applied.
The default value for line-height is roughly 1.2x (depends on browser).
Set the line-height to be equal to the non-padded height of the containing element to vertically align a single line of text (in this case, 18px).
Example fiddle: http://jsfiddle.net/4vq42/
No line-height. Make it the same as the height, either 18px or 100%.
.skills li span{
display:inline-block;
position:relative;
background:white;
bottom:0px;
height:100%;
line-height:18px;
padding:0 5px;
}
Try adding line-height: 18px to .skills li span CSS.
Edit: Just realised Tim Medora already said this. Ignore me.
Setting line-height to the value of your element's height is the simplest way to vertically align text.
.skills li {
height:18px;
line-height:18px;
}
basicly I have li elements which contain a small icon an a text, i want to horizontally and vertically center those elements together. However i dont get it working, since Im not really experienced in CSS.
I already managed to vertically center the elements using two spans and line-height. But Im failing with the horizontal centering, since text align doesnt work for spans, and float middle doesnt exist.
You guys have some ideas??
here my code:
HTML:
echo "<li style=\"background-color:#f7f7f7; color:#2EA620;\"><span class=\"image\"><img src=\"Images/List/Teams/" . $temp . ".png\" /></span><span class=\"text\">".$obj_teams->Name."</span></li>";
CSS:
li {
width:173px;
height:30px;
line-height:30px;
font:"Myriad Pro";
font-size:14px;
padding-left:10px;
padding-right:10px;
border-bottom:1px solid;
border-left:1px solid;
border-right:1px solid;
border-color:#CCC;
}
.image {
float:left;
text
}
.text {
float:left;
color:#2EA620;
line-height:30px;
}
Here an Image of how it looks like now. (If marked the elements which i want to center)
You could use a text-align rule:
li.center {
text-align: center;
}
Take a look at this fiddle for a live example:
http://jsfiddle.net/fX9jp/1/
Your specific problem is that you are floating the image and span left but then want them centered. Remove the float left on both then you can put text-align: center on your li elements.
li {
width:173px;
height:30px;
line-height:30px;
font:"Myriad Pro";
font-size:14px;
padding-left:10px;
padding-right:10px;
border-bottom:1px solid;
border-left:1px solid;
border-right:1px solid;
border-color:#CCC;
text-align:center;
}
.text {
color:#2EA620;
line-height:30px;
}
Try applying text-align: center; to the parent (or any ancestor) element of your span since a span is an inline element (assuming .text is your span).
Or try making the span a block element and setting its left and right margins to auto:
.text {
display: block;
margin: 0 auto;
}
Inline elements like spans respond to text-align on their ancestor elements, whereas block elements like divs respond to setting margins to auto. Note that text contained inside of an element will respond to text-align that is placed on that element (since the text is technically a "text node" inside of that element).
I have a <ul id="slide-holder"> which contains several <li class="slide">.
css:
#slide-holder{
position:absolute;
width: 720px;
height: 540px;
background-color:#FFF;
display: block;
list-style:none;
}
.slide{
width:720px;
height:540px;
display:inline-block;
list-style:none;
}
html:
<ul id="slide-holder">
<li class="slide"></li>
<li class="slide"></li>
<li class="slide"></li>
</ul>
The problem is that instead of having each <li> element next to each other with a huge horizontal scroll bar being displayed, everything is displayed as a block i.e. vertical scroll bar is shown.
I was wondering if the window has a maximum limit of width that cannot exceed or if it is just a minor css issue?
Try to float your lis:
.slide{
float:left;
width:200px;
height:540px;
list-style:none;
}
ul .slide:last-child {
clear:both;
}
This is a css property and not an issue. The overflow will by default be wrapped, thus rendered on a new line. This is expected behavior, as you want your text (inside a <p> tag for example) to be rendered on new lines, when they reach the right edge of its parent.
This is default for all elements, so to remove the wrapping, you need to change the white-space property in your css:
ul{ white-space: nowrap; }
An example of non-default wrapping is seen in notepad. You need to select "wrap text", if you want to get rid of horizontal scrollbars.
jsFiddle here