This is the live example:
http://jsfiddle.net/NjnAF/
The div#con is the search result panel,I want the search item displayed in the list manner with the icon and text.
Now I can not make the icon align middle vertically and make the text the "1" "2" just in the center of the image.
Any suggestion?
I used :
div.item div.img {
float: left;
width: 22px;
height: 25px;
background-image: url('http://i.stack.imgur.com/NpSHB.gif');
background-repeat: no-repeat;
background-position: center left;
text-align: center;
vertical-align: middle;
}
and I have updated the fiddle. Is that what you needed?
Use line-height - vertical alignment: block level elements, like a div do not have any effect with vertical alignment. You would need to use line-height or use absolute positioning with div as relative.
you need to modify the CSS
div.item div.img{ text-align:center;
margin-top:2px; /*can change this according to your need */
}
Add these two properties. Vertical align will not work. Fiddle http://jsfiddle.net/NjnAF/2/
Related
I've made a span composed of an image and text, using the following HTML code. And I'm trying to align that text next to the image, using the following css class:
span.my-profile {
background-image: url('http://placehold.it/450x100/fc6');
background-position: left center;
background-repeat: no-repeat;
padding-left: 16px; /* Or size of icon + spacing */
text-align: center;
}
<span class="my-profile">My Full Name</span>
However, That didn't work as expected. And the text is still aligned to left as the image. So what's wrong with my code? and how is it possible to align the text to the center?
Thanks in advance.
Adding the background image to the same span with the text will only place the image as the background of the span with text.. try placing the image as a separate element in the span using <img /> tag. You can then control the image and the text using either display:inline-block or float in css.
Use a pseudo-element :before to place the image (change the width, height and margins):
span.my-profile:before {
content: "";
display: block;
background: url('/img/no-face.png') no-repeat;
width: 20px;
height: 20px;
float: left;
margin: 0 6px 0 0; }
Try to play with some width-height, padding and display:block properties, it will work.
check this fiddle here
Try to use css style like below
span.my-profile{
width:200px;
height:100px;
display:block;
background:url(http://placehold.it/200x100) no-repeat;
padding-top:100px;
text-align:center;
}
I am trying to center this text character ☢ within a circle. (☢)
While IE 10 displays the text vertically and horizontally centered, both Chrome and Firefox render too much padding at the top.
Any ideas how to fix this? (Flexbox is not a must have)
HTML
<div class="tl-icon">
<div>☢</div>
</div>
CSS
.tl-icon {
align-items: center;
background: black;
border-radius: 50%;
color: yellow;
display: flex;
font-size: 3em;
height: 3rem;
justify-content: center;
width: 3rem;
}
See live demo here: http://codepen.io/dash/pen/ZYePWP
The problem is that the inner child is a text which screws with your height.
I added a line-height which seems to fix it a bit:
.tl-icon div{
line-height:1px;
}
http://codepen.io/anon/pen/ZYePBZ
Target that child div, set it to inline-block and change the vertical alignment:
.tl-icon div{
display: inline-block;
vertical-align: top;
}
CODEPEN
I had to fart about with the dimensions a bit, but this should center vertically and horizontally, so far tested in Chrome, FF and Safari.
http://codepen.io/anon/pen/gbmEWX
Set the parent to
display:table;
Child to
display:table-cell;
vertical-align:middle;
text-align:center;
You've done everything correctly with your flexbox CSS.
The issue appears to be with line-height. You're using an html entity as text and it looks like .tl-icon is inheriting a value for line-height that doesn't work well.
Try adjusting your line-height, and using a unitless value for it. This way the line-height will compute to whatever the font size is for the interior element.
.tl-icon {
line-height:.9;
}
Using css, I gave a background color to a link and set some height and width.
Using "text-align: center" property, text(link) was aligned center horizontally, but how do I align it center vertically with respect to its background color. Its stuck on the top of box.
set line-height equal to height it will automatically centers the text of a tag.
Add some line height to your div
div
{
height: 20px;
line-height: 20px;
vertical-align: middle;
}
or you can use display :table-cell
div {
display: table-cell;
vertical-align:middle;
text-align: center;
}
I have a h1 within the body and want to vertically align and center align this text.
I know I can use the position: absolute; and then margin-top: "HALF OF HEIGHT"; but this h1 changes on refresh and has different widths. The height is always the same so I can vertically align it fine but it's center aligning it. I can't use text-align: center; becuase the h1 is positioned absolute so it won't work.
Is there an easier way to do this?
Thanks!
Given that the element doesn't have a background, you could do this to horizontally center an element with absolute positioning:
.your-element {
position: absolute;
width: 100%;
text-align: center;
}
A working fiddle: http://jsfiddle.net/VSySg/
Depending on the rest of your layout, this may work:
h1 {
display: block;
text-align: center;
line-height: /* height of container */
}
http://jsfiddle.net/xC3vn/
I have an anchor element that looks like this
<img src="imgurl"/>Text
I would like the image and the text of the anchor element to vertically align. I've tried adding vertical-align (css), padding, margins, ets, but the image will not vertically align with the text.
Vertical align only really applies to sibling elements. This should work:
<img scr="imgurl"/><span>Text</span>
With CSS:
a img, a span { vertical-align: middle; }
How do you mean "vertically align"? Should they be next to each other, or on top of? In case of next to each other, should the text be aligned with the top, center or bottom of the image?
If your problem is that they are displayed on top of each other instead of next to, add the following to your css:
a img { display: inline; }
If your problem is the opposite, add this:
a img { display: block; clear: both; }
and see if that helps.
The Proper Way to Align Images and Icons with Anchor Tags is
In your css
a {
background: transparent url(/images/your_image) scroll no-repeat left center;
padding: 2px 0px 2px 20px; //fit as you need
}
In your HTML
Text