Im having trouble vertically aligning text inside a image button.
Vertical-align: middle doesnt seem to work.
Here what i got so far:
#navbar ul {
padding-top: 10px;
float:left;
}
#navbar li {
background-image:url("../images/btns.png");
width: 78px;
height:32px;
float:left;
text-align: center;
font-size: 12px;
list-style:none;
vertical-align: middle;
}
Simplest way to fix this is to give a line-height for the li same as that of its own height.
http://jsfiddle.net/KHBG4/
#navbar ul {
padding-top: 10px;
float:left;
}
#navbar li {
background-image:url("http://placehold.it/78x32");
float:left;
width: 78px;
height:32px;
text-align: center;
font-size: 12px;
list-style:none;
line-height:32px;
}
vertical-align can only be used with inline elements. That having been said, I know img tags are "inline-block" so not really sure what to expect there, but I don't think you mean to vertically align the img, but rather the text, so you need a separate inline tag (span would do fine) and use "position" and "vertical-align" to set it up right.
I have had a recent post about that very issue here:
How can I resize a background-image to fit my element (without set width) in CSS 2?
I would suggest the simplest route of giving your button padding-top (and reducing it's height by that number of course).
It's not truly "auto-centered", as it won't be centered if you change the height without updating the padding, but - it works and it's clean and easy, and simple to update.
Related
So I'm developing a web page, and I'm making it now responsive. I managed to get everything responsive except the main menu nav.
It's a ul element and it has li inside with text. Here are some pictures about the problem
Full webpage:
On mobile:
I just want to adjust the text or the ul element to fit without making another line.
Here's the css ul element:
.main-menu ul {
display: table !important;
background-color: #98B709;
padding: 0;
margin: 0;
text-align: center;
}
And the li element:
.main-menu ul li {
display: inline-block;
float: left;
position: relative;
list-style: none;
}
I tried a lot of things but nothing works...
Thanks and hope you guys can help me!
I found a very useful Stackoverflow post that should answer your question:
Responsive Font Size
And I experienced that changing font size and other problematic parts from px to em generally helps to make is more responsive too.
Try to use different font size e.g
vw Relative to 1% of the width of the viewport
vh Relative to 1% of the height of the viewport
Here is a variation that does not use display:table, which I always avoid.
The important bit you can play with is the 'width' of the 'li' element. If you really want to squash them all on one line, you can make this a very small %.
If you do use the second line, the 'text-align:center' in the 'ul' element will keep everything centered, instead of floating left as you have it now.
I use this code block all the time; it's a common problem.
#main{
width:100%;
}
#main ul {
display: block;
text-align: center;
width: 100%;
padding: 0;
margin: 0;
}
#main li {
width:10%;
list-style: none;
display: inline-block;
padding: 0;
margin: 8px;
}
this is my css:
body {
margin: 0px;
background-color: white;
}
#navbar {
background-color: red;
margin: 0 auto;
width: 900px;
height: 200px;
}
#navbar a {
padding: 20px;
color: grey;
text-decoration: none;
font-weight: bold;
font-size: 20px;
}
navbar is a div inside body and i have a couple of tags inside navbar.
this is the output:
there is a difference between the 'Block level' elements and 'Inline Elements'. The Margins & Paddings of 'Inline Elements' effect only in Horizontal Direction, but not in Vertical Direction, as per the basic concept.
Your Div was a block level element, but anchor tag is an inline element. To give vertical space make it a block element, as you've already found out OR put the anchor in a div, which has vertical space in form of 'padding' or 'margin'!
div a {display:block;padding:20px;} OR div a{display:inline-block;padding:20px;}
In later two cases, padding will now effect in vertical direction also, as has now converted to block-level element, from inline form. Hope, that helps!
I figured it out, I just needed to use: display:inline-block;
you can try like this: Demo
#navbar a {
display:block;
float:left;
}
So on my website I'm trying to get my Nav menu to align center but it's not working for some reason. I tried applying
margin-right: auto;
margin-left:auto;
I also tried other CSS tricks but it still won't align center. Can someone look at my site with firebug and tell me what I'm doing wrong?
my website is http://dev.pti-world.com
I thought I knew CSS decently well but obviously not since I am having this little problem I can't figure out.
If you want to center it you can use margin: 0 auto;
There are 2 lines you need to change in your css:
You have the width of the ul on 100%.
You have the ul with float left.
Solution:
#megaMenu ul.megaMenu {
float:left; <---- delete this because with a float you cant center it.
}
and change this
#megaMenu.megaMenuHorizontal ul.megaMenu {
width: 950px;
margin: 0 auto;
}
try to wrap your navi again and give the wrapper
text-align:center;
and your navi
display:inline-block;
Give your ul centered text, and make your lis not floated and inline-block:
#megaMenu ul.megaMenu {
text-align: center;
}
#megaMenu ul.megaMenu > li {
float: none;
display: inline-block;
}
That will work back to Internet Explorer 8.
Here's my struggle. So I've been wondering how I could make the navbar-links fill out 100% of the nav. So that they have an equal amount of spacing and the font-size will decrease if more links were added - this way it will always fill out 100%.
As it is now, I cannot seem to achieve this. I've only got a set padding, but I've tried doing stuff like:
display: block;
float: left;
width: 100%;
but it's giving me all kind of effects that doesn't work at all :S
Anyone able to help me out on this?
Codepen example
Remove width from #main-navigation and add with to #main-navigation li with a value equal to the 100/the_numberof_elements_in_the list. Your css should be:
#main-navigation {
height: 54px;
overflow: hidden;
border-bottom: 1px solid black;
}
#main-navigation ul {
height: 54px;
overflow: hidden;
}
#main-navigation li {
font-size: 1.0em;
text-transform: uppercase;
list-style: none;
float: left;
width: 20%;
}
This way you'll have your nav occupying all the available width, but your font-size will not automatically resize. You'll should change it also in function of the number of elements (similar the way you have to do to the li's width). If your are generating this list dynamically at server side, you could do the same with the css and then calculate the right values for these two attributes. If your are using ajax to populate the list, you could do change the attributes with javascript.
A way of doing this is using display: table on the parent and display:table-cell on the children. I believe it won't work on some versions of IE (of course). Here's an exaple
You can use the nav tag instead and treat it as table. Treat the <ul> tag as table-row and <li> tag as table-cell. Ex:
nav{
display: table;
text-align: center;
width: 100%
}
nav ul{
display: table-row;
}
nav ul li {
display: table-cell;
}
This will stretch the contents of <li> 100%
I learnt it from the following link: http://www.darkstardesign.com/darkstar-blog/2012/11/27/stretching-horizontal-navigation-menus-to-the-full-width-of-a-layout/
I have an issue with the sliding doors technique here. The heading right after the description is floating left due to the sliding doors technique, but all I want is that is stands alone in the center, above the products.
Can you help me understanding how to do it?
Here is the CSS I used for the heading:
h3.offer-title, h3#comments, h3#reply-title {
background:url(images/offer-title-bg.png) no-repeat right bottom;
color:#434343;
display:block;
float:left;
font-size: 14px;
margin-right: 6px;
padding-right:6px;
text-decoration:none;
height: 43px;
line-height: 0;
position: relative; }
h3.offer-title span, h3#comments span, h3#reply-title span {
background:url(images/offer-title-bg.png) no-repeat;
display:block;
padding-left: 20px;
height: 43px;
line-height: 43px;
padding-right: 16px;
}
Thank you.
It's floating because you set float: left in your first CSS code block. To get rid of that behaviour you need to get rid of the float.
Once the float is gone, if you want the header's background to nicely fit the text like it did before, the element needs to have display: inline-block.
But with display: inline-block and no set width on the header (you could add a width, but then it might break if you want to change the text or font size), it's not centered. To get it centered, you need a wrapper element around it which has text-align: center.
So:
Add this block:
h3.offer-title {
display: inline-block; /* this makes the bg fit the text */
float: none; /* this overrides float:left */
}
Wrap the offer-title element in another div.
Style the wrapper with
.offer-title-wrapper {
text-align: center;
}