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).
Related
So I'm trying to create a drop down menu with the select and options elements that displays when the device width gets small enough. My problem is I can't center the div that the select element is contained within for some reason (the div id is "navbar2"). It just hugs the left side of the screen. Can anyone see my mistake here?
#navbar2 {
display:none;
}
#media (max-width:380px) {
#navbar2 {
display:inline-block;
width:80%;
margin-left:auto;
margin-right:auto;
border:1px solid red;
}
#navbar2 select {
width:40%;
}
}
So I figured this out. Apparently the "auto" trick doesn't work on inline-block elements. So I switched the "display" to "display: block;" and it centered the div horizontally.
I am making a navigation bar and I want all of the links in it to be 30px high. When I set this - height:20px; (20 pixels because there is 5px padding all around) - the height just stays normal. My full code for the a's is:
#header a {
height:20px;
background-color:#666666;
color:white;
text-decoration:none;
border:none;
padding:5px;
}
#header a:hover {
background-color:#CCCCCC;
color:black;
}
JSFiddle: http://jsfiddle.net/Lcupj/
The height property does not apply to elements that are display: inline and <a> elements are display: inline by default.
Set a different value for the display property (such as inline-block) or use line-height instead.
You can also use a padding on A tag, and use line-height either.
example :
a {
padding : 9px;
line-height : 20px;
}
Bye.
height won't apply to inline blocks.
Use display: inline-block in your CSS to make the element behave like an inline element but with some of the block element properties.
use display: inline-block;
#header a {
height:30px;
background-color:#666666;
color:white;
text-decoration:none;
border:none;
padding:5px;
display: inline-block;
}
DEMO
you can also try the following
#header a {
position:absolute;
margin:0;
padding:0;
height:20px;
background-color:#666666;
color:white;
text-decoration:none;
border:none;
padding:5px;
}
sometimes you have to manually set the height or padding of a given element, or the element would be squashed to fit inside the other other element. I also use position:absolute this gives 100% control over your elements position, size etc.
http://jsfiddle.net/Lcupj/
A is an inline element, you can't use height on it. If you want to do so you must first change it into a block element. You can do so with display: block; however this will put your element on a new "line" on your screen, if you want it to stay like an inline element, you should use display: inline-block; Or you could use line-height.
Add to the a rule display:inline-block in CSS
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;
}
i want to center my block menu in the middle, but i also want it to lay next to each other without any huge space.
i tried to float the entire thing and set the margin left and margin right to auto. But after searching the web, i found out that is not possible to center something that is floating.
Then i tried to set the block to inline-block and take away the float element. And again settiing the margin to auto. Now this dosen't seem to work either. I read someplace that you could set the text-align to center, this is centering my text in the block, but the block itself isn't getting in the middle.
my entire menu code in css at this moment:
a.menyStil
{
display: inline-block;
width:150px;
height:25px;
margin-right:auto;
margin-left:auto;
background:#dca; border:1px solid #000;
text-align:center;
text-decoration:none; font-family:verdana, arial, sans-serif; font-size:12px; color:#000;
line-height:25px;
overflow:hidden;
}
a.menyStil:hover {background:#764;}
a.menyStil:active {background:#c00;}
and relevant html code:
<p> <a class="menyStil" href="Hjem.html"> Hjem</a>
<a class="menyStil" href="Kontakt.html"> Kontakt oss</a>
<a class="menyStil" href="om_oss.html"> om osst</a>
<a class="menyStil" href="testing.html"> Testing</a></p>
i would really appreciate help :)
Add this in your css code
p{
width: 650px;
margin: auto;
}
Demo: fiddle
you should add margin auto in p. Because its containg the a. so its come center.
I hope this may be helpful to you.
p {
text-align: center;
}
http://jsfiddle.net/B8gFC/
So I tried to experiment with CSS pseudo class before and after. I tried to use those pseudo to create header element.This is to reduce using div to hold left and right images. This is code for HTML
<header id="mastHead">
<h1>Branding</h1>
</header>
So I have 3 images to create traditional header element which is 20px width for left and right side with 100px height and for the middle, 1px width and 100px height which will repeat horizontal. And here my CSS
#mastHead {
background:url(images/headMiddle.jpg) repeat-x top left;
width:1000px;
height:100px;
overflow:hidden;
}
#mastHead:before {
content:"";
display:block;
background:url(images/headLeft.jpg) no-repeat top left;
width:20px;
height:100px;
float:left;
}
#mastHead:after {
content:"";
display:block;
background:url(images/headRight.jpg) no-repeat top left;
width:20px;
height:100px;
float:right;
}
#mastHead h1 a {
display:block;
width:200px;
height:41px;
background:url(images/logo.png) no-repeat;
}
So the problem is if I remove h1 element, it will align perfectly but if I put these element, it will push the ::after pseudo-class down and it will take leftover space according to it height.How can I make this h1 element to take just middle space without affecting the ::after space?
I made a fiddle with your example: http://jsfiddle.net/3Dcw3/ (only set width to 500 to fit in a fiddle and set background to visualize them)
And here is a fixed version: http://jsfiddle.net/3Dcw3/1/
The points are:
Add position:relative; to the header.
Use absolute positioning instead of floating.
Add paddings so the blocks would position over them.