This is my reference photo on what i would like to achieve. My intention is to have the buttons be the same height regardless of text length and have them be in on line (and stop them from forming this sort of three triangle look below (screenshot below is my existing jsfiddle.
first i tried to set them the same width but the shorter first button does not naturally fit since the other two need an extra space for the words:
.up-promos .top-area .tabs a {
width: 150px;
}
Because of this, I also tried adjusting the height for them to stay the same size however all of them do not align (first button with the least text looks awkward) and the first button somehow moves down. I also tried aligning the text to center and adjusting the margin but the height css probably prevents this change.
.up-promos .top-area .tabs a {
border: 1px solid #fff;
color: #fff;
padding: 10px;
border-radius: 8px;
display: inline-block;
text-align: center;
margin: 0 0 10px 10px;
text-decoration:none;
text-align: center;
width:150px;
height: 30px;
}
Here is the JSFiddle for all of this:
https://jsfiddle.net/b34rsLyu/
I will need some help on these adjustments. Tried what I thought was the solution, hope I can get a guide in the correct fix.
There a few things that can be done.
use flex for .tabs container.
dynamically calculate font size - using font-size: calc( ... )- to prevent overflow for button, or any other container.
if you want to achieve alignment like in in the first screenshot, set a min-width in r-button class and flex-wrap: wrap in .tabs class.
Try using these values, and then modify other classes as you see fit.
.tabs {
display: flex;
align-items: center;
justify-content: center;
background: #eee;
gap: 8px;
flex-wrap: wrap;
}
.r-button {
border: 1px solid black;
border-radius: 8px;
padding: 15px 0px;
word-wrap: break-word;
min-width: 10rem;
font-size: calc(1rem - 0.1vmin);
}
Check the docs for more on css Flex property
You could use display: flex on your container to have better control over how elements behave and flow in relation to each other, here's the simplest solution you can get:
.up-promos .tabs {
display: flex;
}
If you want to learn more about display: flex, because there's tons of things you can tweak on it, I seriously suggest this guide. It's my go-to place to remind myself about all the properties it has as I always fail to remember them.
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.
I need to put an image to an input button but it doesn't work with my code.
This is the code, and it says "couldn't load the image", please help me:
.button-search {
background-image: url('images/lupa.png');
no-repeat scroll center #F1F1F1;
cursor: pointer;
display: inline-block;
float: right;
height: 27px;
overflow:hidden;
text-indent: -9999em;
width: 36px;
border: none;
margin-right: 48px;
}
You have two problems:
First, you have a semi-colon after the background-image selector, but before its parameters. no-repeat scroll center $F1F1F1 are parameters of the background selector (and should be seen as if on the same line, not that the line break matters). Which brings up the next point: wrong selector.
Second, the correct selector (for what you are doing) is background not background-image. The background selector is a "short-hand" selector, and allows you to set (1) background-image, (2) background-position, (3) background-color, (4) background-repeat, etc. But the background-image selector ONLY allows you to set the background image.
jsFiddle Demo
Here is the corrected code:
.button-search {
background: url('http://placekitten.com/g/50/50')no-repeat scroll center #F1F1F1;
cursor: pointer;
display: inline-block;
float: right;
height: 27px;
overflow:hidden;
text-indent: -9999em;
width: 36px;
border: none;
margin-right: 48px;
}
Also note that the text-indent selector (set to -9999em) will move the button text to the left, and (at -9999em) all the way off the screen -- and possibly into a neighbor's house, their kitchen perhaps. Probably you already know this...?
If you get that error, then you got the image URL wrong.
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.