I would like to vertically center font awesome element in a box (div). I almost do it, however icons are not precisely centered. Only the second one looks ok. I have added the red axis of symmetry to illustrate the differences. What is the issue and how can I fix it?
.icon-wrap a:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em;
}
.icon-wrap a {
display: inline-block;
width: 110px;
height: 110px;
text-align: center;
overflow: hidden;
margin: 0px auto;
border: 6px solid black;
border-radius: 100%;
text-decoration: none;
}
...
Here's my code working in a fiddle
Actually, the plus-square-o icon seems to be built that way in Font Awesome. That's why 2 others are pretty well aligned and the first one is not.
If you hover on this icon in Font Awesome you can see it's not the same alignment as the one plus-square.
So, in this case you can either change the icon (to align each icon perfectly) or you can manipulate only on the first <div class="icon-wrap">.
Something, like this:
.icon-wrap:first-child .icon-holder {
padding-top: 5px;
}
Here's an updated jsfiddle to that.
Related
I'm having a hard time aligning some text inside a element styled with display: table-cell. It's just a tab, and I want it to support multiline text. To get the vertical-align: middle; right we need to display it as a table-cell and this is fine mostly, but not here.
On first load it looks like this in chrome. As you can see it's not really in the middle at all.
The very strange thing is, if you open up dev tools and change the line-height from 1 to 2 and then back to 1 it looks fine, like this:
Now if I change line-height to 0 and then back to 1 it looks like this:
How can I make it look good at page load? Is this a known issue?
It looks fine in Firefox, it seems to be chrome only issue.
Heres the CSS for the tab:
.tab-controller__item {
display: inline-table;
border-radius: 6px 6px 0 0;
margin-right: 6px;
position: relative;
overflow: hidden;
vertical-align: middle;
background-color: #717171;
}
.tab-controller__item__link {
color: #fff;
text-decoration: none;
text-transform: uppercase;
padding: 0 2em;
display: table-cell;
line-height: 1;
height: 48px;
vertical-align: middle;
position: relative;
}
and the HTML is pretty basic:
<a class="tab-controller__item__link" href="#">
<span class="icon-star"></span>Kampange<br>& Bonus
</a>
When using display: table-cell, you must have a parent container with display: table or display: inline-table.
In this case, it would be inline-table as your tabs are in a horizontal layout.
.tab {
background-color: #F8AF46;
display: inline-table;
}
Demo : http://jsfiddle.net/Paf_Sebastien/t5pnLe33/
HTML
<div class="leave-comment">
<span class="comment-bubble"></span>Leave a comment for Example Video 8!
</div>
CSS
.leave-comment {
background: #010101;
clear: both;
font-size: 1.4em;
padding: 20px 0;
}
.comment-bubble {
background: url(http://i.imgur.com/iqOtL.png) no-repeat left center;
display: inline-block;
height: 24px;
width: 26px;
float: left;
margin-right: 10px;
}
Here is the JS Fiddle: http://jsfiddle.net/CeZLy/
I am trying to center both the comment bubble and text inside the black box. The text will always be changing so I can't set a fixed width on the a element. Can someone help me out with this?
NOTE: Sorry if I wasn't clear. I want the comment bubble on the left of the text, and then I want both the comment bubble and the text centered inside the black box.
Remove the span. Set the image as the background of the a element. Use text-align:center; and add left-padding for the image:
.leave-comment {
background: #010101;
clear: both;
font-size: 1.4em;
padding: 20px 0;
text-align:center;
}
.leave-comment a {
background: url(http://i.imgur.com/iqOtL.png) no-repeat left center;
}
<div class="leave-comment">
Leave a comment for Example Video 8!
</div>
Check it:
http://jsfiddle.net/C9HKr/
From your comments, I would just leave out the float: left and add a text-align: center
JSFiddle
Vertically centering seems a bit difficult. If you want to center vertically and have fixed height, you can set the line-height of your link to the same height.
See JSFiddle
There's a nice tutorial about vertical centering at Vertical Centering With CSS, explaining several methods and emphasizing the pros and cons of each.
Update:
I just reread your comment. Maybe I misunderstood you. If you just want the link moved a bit up or down, you can also use a different padding at the top and bottom.
See this JSFiddle
.leave-comment {
background-color: #010101;
clear: both;
font-size: 1.4em;
padding: 20px 0;
text-align: center;
}
.comment-bubble {
background: url(http://i.imgur.com/iqOtL.png) no-repeat left center;
display: inline-block;
height: 24px;
width: 26px;
margin-right: 10px;
position: relative;
top: 7px;
}
Well you need the span now.
http://jsfiddle.net/CeZLy/7/ in action
What seemed like an easy task has become hours of puzzling by now.
I have a dropdownlist (#html.dropdownlistfor(model)), which I style via css ( new { #class = "searchDropDownList" } )
The thing is, the standard dropdown list is too short (height-wise), but when I add height to make the box bigger, the selected item is not centered anymore. vertical-align: middle doesnt work on the selected item.
When I add padding to the top of the box, the text goes down as I want, but when you would then hover the textbox, you can see the Selection Arrow being croocked, since that ones also goes down.
See pictures:
Firefox:
Chrome:
Does anyone know how to lower only the text?
EDIT:
Current css:
.searchDropDownList {
display: inline;
width: 114px;
height: 26px;
float: left;
font-size: 14px;
margin: 4px auto auto 2px;
text-align: left;
vertical-align: middle;
padding-left: 2px;
padding-top: auto;
line-height: 10px;
}
Changing the padding-top: auto; to 3px results in the images posted above.
I'm attempting to style heading text similar to how your default legend text appears in fieldsets; that is to say, I'd like a strikethrough-like line to come up to, but not through, the text. I can't seem to find any information on how I might accomplish this, and since on numerous other questions Google's always directed me to Stack Overflow for answers, I thought someone here may be able to give me advice.
For greater clarity. I'm attempting to get this effect on header text:
Centered Header Text
Is there any way to do this?
See: http://jsfiddle.net/thirtydot/jm4VQ/
If the text needs to wrap, this won't work. In IE7, there will be no line.
HTML:
<h2><span>Centered Header Text</span></h2>
CSS:
h2 {
text-align: center;
display: table;
width: 100%;
}
h2 > span, h2:before, h2:after {
display: table-cell;
}
h2:before, h2:after {
background: url(http://dummyimage.com/2x1/f0f/fff&text=+) repeat-x center;
width: 50%;
content: ' ';
}
h2 > span {
white-space: nowrap;
padding: 0 9px;
}
Edit:
<h2><strike> </strike>Your Text Here<strike> </strike></h2>
Here's how you can do it with a few simple tags and non-breaking spaces.
I'd use an image and call it a day, but this seemed to work for me:
CSS
fieldset {
border-right: 0px;
border-left: 0px;
border-bottom: 0px;
width: 200px;
}
legend {
margin: 0 25%;
}
HTML
<fieldset>
<legend>My Text Here</legend>
</fieldset>
That's the only way I could figure out how to do it with css. Note the width is fixed. Once again I wouldn't do this myself.
I came up with a quick, image-less solution that seems to work pretty well in IE 8+ and other browsers, whilst gracefully degrading in IE 6/7:
<h1>CSS 2.1 EXAMPLE</h1>
h1 { position: relative; text-align: center; }
h1:first-line { background-color: white; }
h1:before {
position: absolute;
z-index: -1;
content: '';
left: 0px;
right: 0px;
height: 1px;
top: 50%;
background-color: black;
}
It does come with the following limitations, though:
The text must match the overall background colour exactly, otherwise it will look weird.
If you want any kind of padding on the text, you need to use non-breaking spaces at either side of the text (see demo).
Heading text must always be on one line (works best if fixed width).
Here's a demo: http://jsfiddle.net/AndyE/3tFQJ/
With flexbox being supported by all the latest browsers out there, and it being five years since the IE8 requirement was mentioned by the author, I wanted to have some fun building a new solution using that.
A variety of examples getting more complicated:
https://jsfiddle.net/0mL79b4h/1/
https://jsfiddle.net/0mL79b4h/2/
CSS
div {
display: flex;
align-items: center;
}
div:before,
div:after {
border: 1px solid #000000;
border-radius: 2px;
height: 2px;
display: block;
content: "";
flex: 1;
width: 100%;
}
h1 {
text-align: center;
margin: 8px;
}
HTML
<div>
<h1>Example Text</h1>
</div>
<div>
<h1>Multi-Line<br>Example Text</h1>
</div>
Pros:
Uses flexbox!
Super simple HTML.
Left and right sides can be adjusted for asymmetry.
Zero background issues, no inheriting colors, etc.
Fluid width.
Multi-Line support.
Left/Center/Right/Custom Alignment: Just adjust the flex property separately for the before and after elements, higher numbers will dedicate more space to that side. Remove one entirely to left or right align it.
Interesting effects by playing with the border style (I actually chose a round border in this example). Set height to 0px and use border-top instead for a generic line.
Cons:
Uses flexbox. Call me lazy, but I didn't build in any backward compatibility in this example so it'll look odd on a browser that supports psuedo elements but doesn't support flexbox, although last I checked that was Chrome (Firefox, etc), which are all automatically updated anyway. Might want to use some Modernizr.
Here is what I am using on a client's site: http://jsfiddle.net/TPgE4/
Pros:
No images needed - renders instantly
Uses padding to control space on both sides of text
Text can be center aligned, or left/right aligned — just add, e.g., margin-left: 8px or margin-right: 8px on h2 span style definition to make it look good
Cons:
Requires use of additional tag such as <span>...</span> inside heading tag
Text must fit on one line for good appearance
Background color on <span> element must match surrounding background color, so if you have a non-solid background image, gradient or pattern it won't match perfectly
Kind of late to the party, but this is my solution: https://jsfiddle.net/g43pt908/
Requires no images, and doesn't depend on a background color.
HTML
<div class="hr-text">
<span>Some text</span>
</div>
CSS
.hr-text {
border-top: 1px solid #999;
text-align: center;
background-color: inherit;
}
.hr-text span {
display: inline-block;
position: relative;
height: 14px;
top: -12px;
font-size: 14px;
font-style: italic;
color: #666;
background-color: inherit;
padding: 0 10px;
}
I'm not sure if this would suit your need...
h1:before, h1:after {
content: " ------------- ";
}
This doesn't feel like a very good answer, but I'm posting it anyway.
See: http://jsfiddle.net/rFmQg/
<h2><span>Centered Header Text</span></h2>
h2 {
background: url(http://dummyimage.com/2x1/f0f/fff&text=+) repeat-x center;
text-align: center
}
h2 span {
background: #fff;
padding: 0 9px
}
I don't like it because:
You have to use an image.
This. (it only works if the backgrounds match)
body { padding-top: 100px; }
div.parent {
text-align: center;
border-top: 1px solid #ccc;
}
div.parent div {
display: inline-block;
margin-top: -0.8em;
padding: 0 0.5em;
background: #fff;
}
<body>
<div class="parent">
<div>My Text Here</div>
</div>
</body>
This is a fluid-width solution that matches your design and should be ok in IE7 (though I'll admit I didn't check). There are a couple of downsides:
You lose the fieldset/legend semantics.
You can't put a transparent background on the text.
If you don't need it to be fluid-width, onteria_'s solution is probably your best bet.
tab-ver.tab {
background: url(../images/16by16.png) no-repeat center center;
text-indent: -10000em;
height: 16px;
width: 16px;
padding: 4px 1px;
margin-right: 1px;
margin-left: 50px;
}
<div id="tab-ver" class="tab">English</div>
The problem of above script is that the a link doesn't work at all. If the user clicks the 16by16.png image, the user is not redirected to yahoo.com.
However to fix this problem?
Thank you
// update001//
I have tried the following suggestion:
#tab-ver.tab {
text-indent: -10000em;
}
#tab-ver.tab a{
background: url(../images/16by16.png) no-repeat center center;
height: 16px;
width: 16px;
padding: 4px 1px;
margin-right: 1px;
margin-left: 50px;
display: block;
}
It works for my original problem. However, the displayed image now is offset to bottom of the horizontal menu. It is caused by 'display: block'. However, if I remove 'display:block', then the image will be invisible.
thank you
// update 1 //
Based on the suggestion, the following script works best for me
#tab-en-ver.tab a {
background: url(../images//16by16.png) no-repeat center center;
height: 16px;
width: 16px;
padding: 4px 1px;
margin-right: 1px;
margin-left: 50px;
text-indent: -10000em;
}
However, this suggestion does have one problem. The text 'English' mixes with the image. I cannot figure out how to remove the text 'English' from a link.
by adding the following extra rule will cause the image disappear.
#tab-ver.tab {
text-indent: -10000em;
}
any idea?
Give that CSS to the <a> instead. Add a display: block so it'll display as a block-level element like the <div>. The <div> will expand to fit the <a>.
EDIT: try inline-block instead and see if it helps.
#tab-ver.tab a {
display: inline-block;
background: url(../images/16by16.png) no-repeat center center;
text-indent: -10000em;
height: 16px;
width: 16px;
padding: 4px 1px;
margin-right: 1px;
margin-left: 50px;
}
If you want the text ("English") to be hidden, than you have to use <img/> tag, with an alt attribute, something like:
<img src="english-flag.png" alt="English" />
You can also use some CSS hacks, but:
What for? It's so easy to do it with plain HTML!
Those are hacks, so they may work or not in different browsers.
One of such hacks can be to set a background to the <a/> element, to offset the text, to set the overflow to hidden, and to set fixed width:
a{
padding-left:16px;
overflow:hidden;
display:block;
width:16px;
height:16px;
url(../images/16by16.png) no-repeat left top;}
English
You can have the a tag fill up the div by using:
a {
display: block;
height: 16px;
}
You can then also remove the height from the div as it will grow automatically.