I have a ul with an image and a piece of text:
<ul id="botoes">
<li><img src="image.png"></li>
<li>Perguntas</li>
</ul>
I'm trying to get both items aligned horizontally, since it is an horizontal list. Therefore I'm using:
#botoes li{
display: inline;
list-style-type: none;
padding-right: 20px;
vertical-align: top;
}
this would solved the problem
#botoes li{
display: inline-block;
list-style-type: none;
padding-right: 20px;
vertical-align: middle;
}
Use This CSS this will work hear is an example
#botoes li{
display: inline-block; /* changed */
list-style-type: none;
padding-right: 20px;
vertical-align: middle; /* changed */
}
simply use line-height for your text.
Here is a working Fiddle
(change the alignment value to: top | bottom | middle to your needed use)
Just add that to your css
#botoes a
{
display: inline;
vertical-align: top;
}
just put
style="display:inline-block;"
in tag a or tag p
example
<ul>
<li>
<img height="69" width="94" src="images/guest.png"/>
<a href="#" style="display:inline-block;">
<h4>KM Plan 2016</h4>
</a>
</li>
</ul>
try yourself with JSFilddle
Related
I'm trying to hide the overflow text of li and my li looks like this
<li class="food_item">
<a href="#" class="food_name" title="test">
testtesttesttesttesttesttesttesttest
</a>
<span>(12)</span>
</li>
<li class="food_item">
a short one
<span>(12)</span>
</li>
and my css
.food_category>.food_item {
width: 25%;
float: left;
line-height: 30px;
}
.food_category .food_name {
font-size: 14px;
margin: 0px 4px 0px 0px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
width: 80%;
display: inline-block;
}
food_category is the class name of the ul tag, now the effect is below:
the span and the a tag are not in the same line, I assume it's about the inline-block property of the a, but if I remove that, the text-overflow will not work and the overflow text will not be hidden. I'm stuck here, can anybody help me? how can I make the a and span show in the same line while keeping overflow text hidden?
Update
this is the jsfiddle link, btw,I didn't set the css of span. What I want is to make the span text right behind the a tag like this testest... (12).Thx!
In regards to your update, you need to set the anchor tag and span tag to be vertically aligned at the top of the list element. Add the following to your CSS:
.food_item a,
.food_item span {
vertical-align: top;
}
This produces the desired behavior.
DEMO
You can do something like:
.food_item span {
display: inline-block;
float:left;
}
and add float:left; to .food_item .food_name
.food_item .food_name {
font-size: 14px;
margin: 0px 4px 0px 0px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
width: 60%;
display: inline-block;
float:left;
}
FIDDLE
You may need to update the margin/padding for the spacing of the span.
I would also recommend adding something like clearfix on each li element to prevent float issues:
<li class="food_item clearfix">
...
</li>
<li class="food_item clearfix">
...
</li>
.clearfix {
*zoom: 1;
}
.clearfix:before,
.clearfix:after {
display: table;
line-height: 0;
content: "";
}
.clearfix:after {
clear: both;
}
I'm trying to center a horizontal list of image links, though it seems that the left of the images are being centered. As you can see, the center of the list of images (which are all the same size) is slightly to the right of the text.
HTML:
<div id='nav'>
<ul>
<li>
<a href=''><img src='images/login.png' /></a>
</li>
<li>
<a href=''><img src='images/add.png' /></a>
</li>
<li>
<a href=''><img src='images/forum.png' /></a>
</li>
</ul>
</div>
Css:
#nav {
text-align: center;
}
#nav ul {
list-style: none;
margin: 20px auto;
}
#nav li {
display: inline-block;
margin: 0px 30px;
}
What can I do to completely center it?
Working Demo : http://jsfiddle.net/3d6TS/
The <ul> tag by default adds padding. You need to set padding:0 manually to <ul> tag.
#nav ul {
list-style: none;
margin: 20px auto;
padding:0;
}
#nav { text-align: center; }
#nav ul { list-style: none; }
#nav ul li { display: inline; }
the solution is the display:inline on the li
A good solution would be to maintain the margin-left and make sure the first child has a left margin of 0. This causes both the first and last children to have no margins on the edges it meets with the parent. This is good as :first-child doesn't catastrophically break styles in >=ie7 where as :last-child is unsupported in <=ie8 making the reverse of this infeasible for the time being.
#nav ul li {
display: inline-block;
margin-left:30px;
}
#nav ul li:first-child {
margin-left:0;
}
I'm trying to vertically align text with an image (or vice-versa?). Here's some code:
<div class="row">
<div class="col-md-3">col-md-3
<ul>
<li><img src="http://placehold.it/60x60"><p>Text Text Text</p></li>
<li><img src="http://placehold.it/60x60"><p>Text</p></li>
<li><img src="http://placehold.it/60x60"><p>Text Text Text Text</p></li>
<li><img src="http://placehold.it/60x60"><p>Text Text</p></li>
<li><img src="http://placehold.it/60x60"><p>Text Text Text Text Text</p></li>
<li><img src="http://placehold.it/60x60"><p>Text</p></li>
<li><img src="http://placehold.it/60x60"><p>Text Text</p></li>
</ul>
{# 3 more columns like this #}
</div>
also CSS:
ul {
list-style-type: none;
padding: 0;
margin: 0;
}
div ul li {
display: table-row;
}
img {
float: left;
margin: 0 0 10px 0;
padding: 2px;
vertical-align: middle;
}
also, might be important all images are the same fixed size, let's say 60x60 like in example and I can not use it as a background.
How can I align it? Thanks.
Update: as were pointed out, I'm looking for text to be in the middle of the right edge of the picture, thanks.
My solution works with one line of text as well as multiple lines.
Working Fiddle Tested on: IE10, IE9, IE8, Chrome, FF, Safari
HTML: same as you posted
I'm assuming you meant middle alignment. if not: use top | bottom instead of middle
CSS
*
{
padding: 0;
margin: 0;
}
ul
{
list-style-type: none;
}
div ul li
{
margin: 5px;
}
img
{
vertical-align: middle; /* | top | bottom */
}
div ul li p
{
display: inline-block;
vertical-align: middle; /* | top | bottom */
}
Just remove the <p> tag and the float:left from img and you got it.
Demo at http://jsfiddle.net/BA2Lc/
I am not a big fan of using those table display options, had some bad cross-browser experiences with them.
Seems to me you could use line-height here. Something like this:
ul {
list-style-type: none;
padding: 0;
margin: 0;
}
div ul li {
line-height: 60px;
}
img {
float: left;
margin: 0 0 10px 0;
padding: 2px;
}
and a fiddle: http://jsfiddle.net/qjSpj/1/
You can modify the <p> style from the default display to inline:
p {display: inline}
You can use the vertical-align: top; declaration on the li element. But you will need to use a clearfix since you're floating the image.
I just added vertical-align:middle/top/bottom; to the images and worked.
I want to have the phone number and email address vertically align with the little icons next to them. I'm trying to change their line-height, but that changes the line height of all the li's in that area. I think that is because they are inline. Here is the site and the css.
LINK: www.matthewtbrown.com/newsite
HTML:
<ul class="contact">
<li><img src="http://s7.postimg.org/64ux9a1if/email.png"></li>
<li class="contacttext">mbrown74#rocketmail.com</li>
<li><img src="http://s7.postimg.org/g0w08x7af/phone.png"></li>
<li class="contacttext">978-761-1205</li>
</ul>
CSS:
.contact {
color: #fff;
text-align: center;
float:none;
}
.contact > li {
display: inline;
}
.contacttext {
font-size: 19px;
padding-left: 5px;
}
That's where vertical-align comes into play which aligns inline elements to each other:
In your case the following should work:
.contacttext{
vertical-align:text-top;
}
Also note, that if you want to have your li contain the img properly, it needs a display-type other than the default inline - inline-block might be suited most.
Try something like this:
li {
display: inline;
vertical-align: top;
line-height: 25px;
}
after this i have this result:
try this
<ul class="contact">
<li class="contacttext">
<img src="http://s7.postimg.org/64ux9a1if/email.png">mbrown74#rocketmail.com
</li>
<li class="contacttext">
<img src="http://s7.postimg.org/g0w08x7af/phone.png">978-761-1205
</li>
I just kept the icons and the text in the same li's
I got it. I did:
.contacttext {
font-size: 19px;
padding-left: 5px;
display:inline-block;
vertical-align:middle;
}
You could add margin-bottom to your <img> to solve this issue.
li img {
margin-bottom: 3px;
}
I want to align menu text at the bottom of image how to i achieve it?
Expected output:
Image Image Image Image
[menutext] [menutext][menutext] [menutext]
Actual output :
Image[menutext] Image[menutext] Image[menutext] Image[menutext]
my Css Code:
#vilaniHeader
{
margin: 0;
padding: 0;
height: 80px;
background-color: Black;
}
#vilaniHeader h1
{
padding-left: 15%;
font: Arial;
font-size: 30px;
color: #ffffff;
font-weight: bold;
float: left;
}
#vilaniHeader #menu
{
color: #ffffff;
font: Arial;
font-size: 18px;
font-weight: bold;
padding-top: 30px;
padding-left: 30%;
}
#vilaniHeader #menu ul
{
list-style: none;
margin: 0;
padding: 0;
padding-right: 300px;
padding-bottom: 300px;
}
#vilaniHeader #menu li
{
display: inline;
margin: 0 15px 0 15px;
float: none;
text-align:center;
}
#vilaniHeader #menu a
{
text-decoration: none;
color: #ffffff;
}
#vilaniHeader #menu .menuHome
{
color: red;
clear:both;
padding-top:50px;
background-image:url:("Styles/menuHome.png") ;
vertical-align:text-top;
}
and My HTML code
<div id="vilaniHeader">
<h1>
Comany name
</h1>
<div id="menu">
<ul>
<li class="menuHome"><img src="Styles/menuHome.png" />Home</li>
<li><a href="About.aspx">Car</li>
<li><a href="About.aspx">Mobile</li>
<li><a href="About.aspx">OldThings</li>
<li><a href="About.aspx">Matrimoni</li>
</ul>
</div>
</div>
I want menu text should be align at the bottom of the image plese help me to do that.
I came up with this solution building upon the answer here from tejash. My answer validates and is search engine friendly.
I prefered to use links within a div but I imagine this will work with an ul
I use a background image that does not show if CSS is disabled
I use a span set displayed as block because a div inside an a tag does not validate
I use a class to place the image but use ids if you want different pics for each link
Change the width + heights to suit your needs
HTML
<div id="nav">
<span class="image"></span><span>About Us</span>
<span class="image"></span><span>Investors</span>
</div>
CSS
#nav a {
display:block;
float: left;
width:100px;
}
.image {
display:block;
background: url("myimage.jpg") no-repeat scroll center center transparent;
height:40px;
width:100px;
}
Make the img a block element so it takes the full width / line-breaks afterwards.
#menu li { display:block; }
That’s all.
I would suggest add some wrapper on text and make image and wrapper both display:block;
You can use span tag as an wrapper for text.
HTML
<ul>
<li><a><img src="Styles/menuHome.png" /><span>Home</span></a></li>
</ul>
CSS
li img, li span
{
display:block;
}
If you want your text to overlay your image, but at the bottom, you should try to play around with the line-height property. That will cause your text to move down, so it will be in the center of it's line.
I have two solutions for you. style1 works for items with text smaller than the image. style2 works for items with text wider than the image. Easiest is to make sure that the images are always wider or smaller than the text, so that you need only one style.
CSS:
#menu {
list-style:none
}
#menu li {
float:left;
text-align:center
}
#menu .style1 img, #menu .style2 span {
overflow:hidden
}
#menu .style1 span, #menu .style2 img {
display:block
}
HTML:
<div id="vilaniHeader">
<h1>Comany name</h1>
<ul id="menu">
<li class="style1"><img src="Styles/menuHome.png" width="10" alt="" /> <span>Home</span></li>
<li class="style2"><img src="Styles/menuHome.png" width="100" alt="" /> <span>Car</span></li>
</ul>
</div>
I'm not a span-fan but it seems like you can't do it without here.
BTW, why don't you just add a br?
CSS:
#menu {
list-style:none
}
#menu li {
float:left;
text-align:center
}
HTML:
<div id="vilaniHeader">
<h1>Comany name</h1>
<ul id="menu">
<li><img src="Styles/menuHome.png" width="10" alt="" /><br />Home</li>
<li><img src="Styles/menuHome.png" width="100" alt="" /><br />Car</li>
</ul>
</div>
I guess that's the most easy and reliable solution.
You can do this way, obviously replacing the image sample I used. For the link to work, you can use a jQuery click event on LI, so it searches for the link inside the clicked LI and then opens the desired link.
http://jsfiddle.net/WcePK/
HTML
<ul>
<li class="menuHome"><img src="Styles/menuHome.png" />Home</li>
<li style="background-image: url('http://jsfiddle.net/img/logo.png')">Car</li>
<li style="background-image: url('http://jsfiddle.net/img/logo.png')">Mobile</li>
<li style="background-image: url('http://jsfiddle.net/img/logo.png')">OldThings</li>
<li style="background-image: url('http://jsfiddle.net/img/logo.png')">Matrimoni</li>
</ul>
CSS
LI {
float: left;
margin: 5px;
padding: 50px 10px 10px;
min-width: 100px;
background-repeat: no-repeat;
background-position: center 10px;
background-color: #366D93;
text-align: center;
cursor: pointer
}