This is my code: http://jsfiddle.net/spadez/Z3he9/
I've been trying to align the green circle vertically within the white box, but I'm struggling on how it should be approached.
Using vertical-align: center; does nothing if applied to the circle.
Can anyone explain how it should be done please, in the most semantically correct way.
Remove the display:block attribute from the title class and that should do the trick.
vertical-align will not work with floated elements as floats are not within the normal 'flow' of the document. You can use vertical align with inline or inline-block elements.
.title{
display: inline-block;
vertical-align: middle;
}
Remove float: right; from .number.
As said by Dave Mroz, removing the display:block from .title should do the trick for you.
But in order to keep the .box element's original dimensions from you fiddle, you should also clear the floats after .title and .number.
Like this.
You need to change your CSS like this way
.box {
background-color: white;
padding: 30px;
margin-bottom: 30px;
border-radius:4px;
height:30px;
}
.title {color: rgb(15, 15, 15);
font-family: myriad-pro, Helvetica, sans-serif;
font-size: 24px;
margin-bottom: 20px;
display:block;
float:left;
}
Working Fiddle
Related
I have spent countless hours yesterday and today to figure out how to do this. I cant believe CSS doesn't have an easy way to handle this.
Essentially, I have some text within a span class="name" whose length is not fixed. In certain instances, it can spill over to the next line. How do I vertically align this within my container.
More specifically, how do I vertically align "ABC Father And Sons Company LLC" within my container?
http://jsfiddle.net/D3L8S/
<div class="container">
<span class="name">ABC Father And Sons Company LLC </span>
Address
Hours
More
</div>
css classes
// CSS
.container {
background: #DDEBF0;
padding: 11px;
border: 1px solid #D2D2D2;
width: 380px;
margin-bottom: 10px;
height:18px;
line-height:18px;
display:inline-block;
}
.name {
width:200px;
float:left;
}
.addr, .hours, .more {
width:60px;
float:left;
}
If I add a negative top margin to "name" (margin-top:-8px), I can achieve this but it obviously messes up rendering for XYZ Company LLC
http://jsfiddle.net/FM4dA/
The solution should ideally be Cross-browser compatible (atleast ie8 should support it)
EDIT - I forgot to mention initially that my container width is fixed and cannot be changed.
Here is one way of doing it using inline blocks:
.container {
background: #DDEBF0;
padding: 11px;
border: 1px solid #D2D2D2;
width: 380px;
height: 50px;
line-height: 50px;
margin-bottom: 10px;
display:inline-block;
}
.name {
width:200px;
display: inline-block;
vertical-align: middle;
line-height: 1;
}
.addr, .hours, .more {
display: inline-block;
vertical-align: middle;
line-height: 1;
}
First, make sure to leave enough vertical space for multi-line names, so on .container,
I used height: 50px and line-height: 50px.
However, you need to reset the line-height: 1 (or some suitable value) on the child elements otherwise the interline spacing will not be attractive.
Then, instead of floats, use display: inline-block and vertical-align: middle on the
child elements (.name, .addr, .hours, .more).
See demo at: http://jsfiddle.net/audetwebdesign/Wp84v/
Note: You may not need to specify the width on .addr, .hours, .more, so I let the
widths take on the shrink-to-fit value.
One way to vertically align div's contents is to use the vertical-align css property. But it works only on display:table-cell elements. So, wrap your container into a display:table div, and change the container display to display:table-cell.
Like this: http://jsfiddle.net/D3L8S/2/
Try this, It might help somebody
.name {
width:200px;
float:left;
margin-top:-8px;
word-wrap:break-word;
text-align: center;
}
DEMO
When you want to vertically center multiple lines, put the text into an inline block then pretend that the inline-block was a single line of text.
.container {
background: #DDEBF0;
padding: 11px;
border: 1px solid #D2D2D2;
width: 380px;
margin-bottom: 10px;
height: 18px;
line-height: 18px
display:inline-block;
}
.name {
width:200px;
float:left;
margin-top:-8px;
display: inline-block;
vertical-align: middle;
line-height: 14px;
}
NOTE:
Why you should add the line-height property ?
If you add height to an element , where exactly does the text inside of it lie? That is, if you have a block of text that is font-size: 10px (a theoretical height:10px) inside a container that is 60px where exactly is the text going to end up? Most surely at the top of the container, because the text can only position itself where the text flows, inside a height:10px space. But you can overcome that by using a line-height value the same height as the container, this way the text will take in the vertical-align property and align itself properly.
I came across this behavior recently when a client reported that some of the buttons on a page had vertically centered text while others did not.
As it turns out, buttons will vertically center text inside them but links won't. Example here: http://jsfiddle.net/valentin/7EjtD/
a, button{
height: 200px;
background-color: #ff6400;
color: #fff;
font-weight: bold;
display: inline-block;
vertical-align: top;
border: 0;
padding: 20px;
font-family: sans-serif;
text-decoration: none;
}
Is there any way to add this behavior to links as well outside of using line-height?
Button aligns to the middle because is its default behavior. Your fiddle is aligning top actually. To make it work you can wrap your elements on an display:table element, like a div. Then set the button and the link to be display:table-cell. Then your vertical-align will work. Like this:
<div class="wrapper">
LINK
<button>BUTTON</button>
</div>
And the css:
*{
box-sizing: border-box;
}
div.wrapper {
display:table;
}
a, button{
height: 200px;
background-color: #ff6400;
color: #fff;
font-weight: bold;
display: table-cell;
vertical-align: middle;
border: 0;
padding: 20px;
font-family: sans-serif;
text-decoration: none;
}
Buttons are inline-block elements, while anchors are just inline. You can use padding to achieve the same effect:
a
{
padding: 91px 20px; /* <---(height-fontSize)/2 */
height: auto;
}
JSFiddle
TableData (TD AKA cell) are pretty damn good at default text centering ;)
live demo
a{
display: table-cell;
vertical-align: middle;
}
for clean-code-sake i'd use a special class like:
a.buttonAlike{
Sorry folks! Didn't see he wanted to avoid line-height. Original post:
Add line-height equal to the height of your element. In this case:
line-height: 200px;
DEMO: JSFIDDLE
I have 4 Images, and for some reasons my brain stopped working and i cant figure out why i cant center those.
That's the Fiddle -> http://jsfiddle.net/theminijohn/bcMX5/
If i try to just <center> them i'm getting a Deprecated Html Tag Error in my Editor.
I tried a lot of things, till rewriting the Css and Html Code, but i'm brain stuck here.
Could some Gentleman help brake my blockade ? :)
Here is one way of doing it.
Add a wrapper block element around your div's and then apply the following CSS:
.wrap {
border: 1px solid blue;
overflow: auto;
text-align: center;
}
/* Center 4 Blocks */
.hd_b {
font-size: 13px;
font-weight: normal;
margin-top: 10px;
display: block;
text-decoration: none;
}
._hd {
margin-right: 20px;
display: inline-block;
text-align: center;
}
._hd:last-child {
margin-right: 0;
}
._hd img {
opacity: .85;
}
._hd a:hover img {
opacity: 1;
}
See demo at http://jsfiddle.net/audetwebdesign/QTxy9/
The parent .wrap block has text-align: center, and this will center the child ._hd div's that have display: inline-block.
You need to reset the right margin on the last child div using ._hd:last-child.
This works pretty well if you are willing to use the inline-block display type.
Note that any white space between inline-block elements translate into a 1ex wide space, which may not be obvious when you set the margin between blocks.
All of those divs need to be in one container div that has a fixed width. Then you can apply margin: 0 auto to the container.
http://jsfiddle.net/bcMX5/9/
Try doing this:-
Give a "main" DIV outside all img DIV "<div id="main">"
and give "margin: 0 auto;" along with some width to it.
Please refer the Fiddle: http://jsfiddle.net/aasthatuteja/6U2YJ/
Hope this should solve your issue!
would this be, want you want?
._hd {
margin-right: 20px;
display: block;
width:100%;
text-align: center;
}
Forget about margin and float ;) http://jsfiddle.net/bcMX5/8/
._hd {
//margin-right: 20px;
display: block;
//float: left;
text-align: center;
}
Depends on how you want to center the elements? If it's in a column the above answer would work. Its in a grid then wrap them in a fixed width container.
._hd_container{
width:440px;
margin:0 auto;
}
http://jsfiddle.net/RzfMP/
I've a problem accomplishing what I want with CSS:
Stylesheet:
/* firstHeading */
.firstHeading {
background-color:#9f9f2c;
padding:10px;
font-family: 'BankGothic Md BT', Machine;
font-variant: small-caps;
text-transform: capitalize;
font-weight: normal;
font-size: x-large;
color:#ffff95;
border-style: ridge;
border-width: 2px;
border-color: gray;
border-collapse: separate;
border-spacing: 2px;
margin-top:0;
margin-bottom:10px;
margin-left:auto;
margin-right:auto;
text-align: center;
display: inline-block;
*zoom: 1;
*display: inline;
}
HTML:
<h1 id="firstHeading" class="firstHeading">List title</h1>
The challenge: This looks effectively exactly how I want it, but now I need to center this horizontally (not vertically) across the page, while keeping the border and background fill color to be similar in size to how they are - purely in CSS. The "List title" can be very short or very long - dynamic width.
As you can see, I tried setting margins on left and right to auto. Most suggestions at this point I see suggest setting a width, like 'width:100%;'. When I've done so, it centered across the page, but it really stretched the background "block" and I'd like that to be more form-fitting. The other suggestions I read also made it not dynamic width, and I then had issues with wrapping.
I also can't wrap in another div in the HTML: it's already wrapped in a div called "content" - the HTML is generated code from a MediaWiki page. If we center "content", we center more than just the heading but the rest of the page content, and I want that to be left-aligned.
Suggestions?
You are trying to center an inline-block, which can really only be done by setting text-align: center; on the parent element.
You can first, set the h1 to display: block; and text-align: center;. After that, you can use a span inside of the h1 for your background/border effect. Doing this will allow the span to sit centered within the h1 tag, without the width of the span expanding outwards.
HTML:
<h1 id="firstHeading" class="firstHeading">
<span>List title</span>
</h1>
CSS:
/* firstHeading */
.firstHeading {
margin-top:0;
margin-bottom:10px;
margin-left:auto;
margin-right:auto;
text-align: center;
display: block;
*zoom: 1;
text-align: center;
}
.firstHeading span {
background-color:#9f9f2c;
padding:10px;
font-family: 'BankGothic Md BT', Machine;
font-variant: small-caps;
text-transform: capitalize;
font-weight: normal;
font-size: x-large;
color:#ffff95;
border-style: ridge;
border-width: 2px;
border-color: gray;
border-collapse: separate;
border-spacing: 2px;
}
Example: http://jsfiddle.net/s2kjY/
Elements must have an explicit width set in order to center them horizontally with auto margins. If you're using display: inline-block then you should be able to center it with text-align: center.
I have an h2 element that, ideally, should be aligned with it's left and right borders through it's vertical midpoint. I've tried padding, and vertical-align:middle but nothing seems to work. Ideas?
Thank you.
jsfiddle
I've moved the font-size and added a line-height declaration to the #title element, as the vertical-align property is affected by these properties:
#save-the-date #title {
padding-left: 80px;
text-align: center;
width: 800px;
font-size: 180%;
line-height: 150%;
}
You only need to declare the h2 as an inline display style, unless you want the width fixed, in which case use inline-block and a width:
#save-the-date #title h2 {
display: inline;
}
You can then have a single rule for both the spans, I removed the extra declarations for the background that weren't necessary:
#save-the-date #title span {
display: inline-block;
background: #333333;
width: 300px;
height: 3px;
vertical-align: middle;
}
The updated fiddle: http://jsfiddle.net/QjUw2/
Try Using Line Height Property
h2 { line-height: *font-size* }
Check CSS line-height..