My menu with icons looks like,
Icons are displayed slightly above the text caption. I read the tips given here, to use vertical-align. And after specifying both line-height and vertical-align, it doesn't have any effect.
Plunker code is here.
How can i ensure the icon and the text item are vertically aligned?
Try centering your icons within your em elements via the background-position property, which should cause them to be centered just as your caption text were and align properly (previously they were positioned in the top-left corner) :
em[class^='icon-'] {
/* omitted for brevity */
background-position: center;
}
You can see an updated Plunker here and an example of what it looks like below ;
Your icons are background images on a 50px square element. Just set the background to be centered
em[class^='icon-'] {
display: inline-block;
height: 50px;
width: 50px;
background-repeat: no-repeat;
vertical-align : middle;
line-height:50px;
background-position: center; /* <--- this part */
}
You can use
a em {margin-top:10px;}
and see when you want the icon and change the value of margin-top
Related
My button, defined as <a href='#' class='button'>Click</a> and styled as .button { background: red; padding: 20px; }, isn't vertically centered because the font I'm using has more inherent space below it than above it. Is there a way to center it without changing the markup, and if not what's the best option?
EDIT: using line-height instead of padding works for default font, not with the one I'm using.
(the gray around the button is my page background not a border)
Use line-height. This sets the height of the text and provides an invisible, equal padding vertically. Note, this trick will only work on block elements. So if you want to use it on an a tag, you will need to convert it to a block element (using display: block)
a.button {
background: red;
color: white;
text-align: center;
width:100px;
/* The magical lines */
line-height: 3em;
display: block;
}
<a class="button">Text</a>
This is ideal for single-line text in an element--not so much for multiline elements.
Use line-height property instead of padding for vertical center alignment
I use Wordpress with the UDesign theme which includes iconfonts and I use these on my website to show icons in small blue boxes, you can see them on this page.
http://www.whichgreekisland.co.uk/islands/corfu/beaches/agnos/
I had to customise the CSS to get it to display in the boxes, I found a tutorial online that did it with circles and I simply changed the border radius to make them squares with rounded corners. so it uses a class called .circle-icon which has the following css on it.
color: #FFF;
font-size: 2.4em;
background: #018ED7 none repeat scroll 0% 0%;
width: 120px;
height: 120px;
text-align: center;
vertical-align: middle;
padding: 6px;
line-height: 2.6em;
margin-right: 10px;
border-radius: 3px;
They display correctly on Chrome and Firefox, as in, the icon is in the centre of the box but in IE the bottom of the box is missing so the icon is at the bottom of the box and the box is too small.
I've tried changing the css but I can't get it to work. What am I doing wrong or is there a better way of getting these icons in the center of a small blue box with rounded corners?
Thanks.
The use of the <i> tag is wrong. In HTML, <i> should stand for alternate parts of text (usually render in italic) and so is an inline element. Sometimes it is used to render an icon, but it is a semantic missuse.
So if you use <i> to render an icon you should change his display mode to inline-block. Actually the size of your icon is just calculated from the size of the pseudo element :before, the line-height and the padding (which can render oddly on inline elements). So your width and height properties of 120px are not applied.
What you need to do is to add the following rules to get the same render as it currently is in Chrome/FF, but in inline-block:
i {
display: inline-block
width: 53px;
height: 48px;
}
i:before {
line-height: 48px; /* vertically center the icon */
}
I have a jsfiddle here - http://jsfiddle.net/gh4Lur4b/2/
It's a bootstrap carousel with caption on each slide.
I'd like to change the position of the caption so it is left aligned to the red block below that is a bootstrap container block. I can position it with px or % but looks out of place at big pr small screen sizes.
I'd also like to have the text inline and have a black background. In the example I have done it by fixed the width of the container which won't work because I don't know how much text that will be.
.block{
background: red;
height: 200px;
}
.carousel-caption{
font-size: 3em;
left: 10%;
text-align: left;
background: black;
color: white;
display: inline;
width: 200px;
padding: 0;
}
1.To align left edge with the red block, you could add left: 0; to your class .carousel-caption. So the caption will be positioned to the left edge.
2.For the size of the caption box. No need to set the size in fix pixel. The reason why there is a strange width for this box is. The CSS code in Bootstrap has already set a rule right:15%;. That makes the right side of this box stick to the 15% of the right edge. It automatically drag the box's right edge. Thus, let remove this rule by add right:auto; to your .carousel-caption, and remember to remove the width:200px; .
You can override it by putting styles width: 46%; and margin-left: -153px; into .carousel-caption class.
I'm having a problem displaying a small image using CSS. I'm trying to show an icon sized picture (the picture has a few pixel border so it isn't edge to edge) but the image itself isn't centered when it's displayed and part of it is being hidden by the right and bottom shadows of the surrounding box. I like the look of the shadows but I think the image is so small, the shadows of the box can't be ignored in the sizing. Here's my CSS. Any ideas?
.delete_button {
background: url('trash_can.png');
background-repeat: no-repeat;
width: 20px;
height: 24px;
display: inline;
}
Try this, adjusting the background-position values until your image is positioned correctly:
.delete_button {
background: url('trash_can.png');
background-repeat: no-repeat;
width: 20px;
height: 24px;
display: inline;
background-position : -3px -4px;
}
Expanding on this a little further, you might want to try to add all your small images into one icon image in a matrix style. Then you can select just the image you want using the width, height and background-position. This will allow all your icons to be loaded at once as a single file, reducing internet traffic. When a "new" icon is needed, it will already be cached and immediately be available.
background-image: url("icons.png");
background-position: 30px 40px; /* Use these values to select your small image contained in your large image */
background-repeat : repeat;
width : 20px; /* or however large your icon is */
height : 24px; /* or however large your icon is */
I'm finishing my web site http://centrosokoladine.lt/ And how you can see there is in middle left some picture covered with text, and I need to wrap that text. Image is set like those box'es bakground image, no repeat left middle...
Here that exact part of html:
<div class="turinio"><?php the_content(); ?></div>
And css:
.vidinis
{
background-color:#a68e84;
layer-background-color:#a68e84;
width: 709px;
/* height: 306px; */
align: center;
padding-top: 17px;
visibility: visible;
**background-image: url('http://centrosokoladine.lt/wp-content/themes/sokoladine/grafika/info.gif');
background-repeat: no-repeat;
word-wrap: break-word;
background-position: bottom left;**
overflow:hidden;
}
I know that it's not posible wrap text arround background images so I'm looking for other solution here, maybe I already tried to create seperate div for that image, but I failed..
You cannot do this with a background-image unless (1) You give a padding-bottom to your div and don't show text next to the image, or (2) you give a padding-left to your div and don't show text under the image.
An img element is the normal (html) way to do this. You can then add the align attribute to that image.
float: left;
Float will do the trick.