I want to align a line of text directly underneath a line of text.
HTML
<h4 class="support1">Number 123456</h4>
<h4 class="support2">Number 678910</h4>
CSS
.support1 { float:right;}
.support2 {float:right;}
Jsfiddle
http://jsfiddle.net/3Dtc4/
Use clear:right in .support2:
.support1, .support2 { float:right;}
.support2 { clear:right; }
http://jsfiddle.net/3Dtc4/1/
Is the floating necessary? You could just keep the elements as block elements and align the text right:
http://jsfiddle.net/3Dtc4/9/
with text-align:right;
As header elements are block level elements, they will push subsequent elements down. You can simply use text-align: right; to make sure that both are aligned to the right and the block-level effects will take care of them being beneath each other.
CSS
.support1, .support2 {
text-align:right;
}
Example: http://jsfiddle.net/23U6Q/
Is that the desired effect?
<h4 class="support1">Number 12345</h4><br>
<h4 class="support2">Number 678910</h4>
or
.support1 { float:right;}
.support2 {float:right; clear:right; }
Related
With the code below (and several other variations I've tried), when I shrink the browser window and my text becomes multi-lined, the next lines always falls below the image I have to the left of the text. How can I keep the resulting multi-line text vertically aligned next to the image? I've noticed plenty of solutions for single line text next to an image but haven't seen any for multi-line text.
<div id="printnotice" style="float:left;margin-top:5px;margin-bottom:10px;width:95%;text-align:center;">
<div style="float:left;margin:auto;display:block;">
<img style="align:left;vertical-align:middle;" alt="STOP" src="/Portal Content/Home/Stop">
<span style="margin-left:20px;font-family:Calibri;font-size:1.5em;">Required: Print Registration Information and Support Options and give to customer</span>
</div>
</div>
If you need the text on the right to be verticaly align next to the image, you can use display:table; and display:table-cell;
See this FIDDLE
HTML :
<div id="printnotice">
<div>
<span><img alt="STOP" src="http://lorempixel.com/output/food-h-g-198-256-8.jpg" /></span>
<span>Required: Print Registration Information and Support Options and give to customer</span>
</div>
</div>
CSS :
#printnotice {
float:left;
margin-top:5px;
margin-bottom:10px;
width:95%;
text-align:center;
}
#printnotice div {
float:left;
margin:auto;
display:table;
}
#printnotice span {
display:table-cell;
vertical-align:middle;
margin-left:20px;
font-family:Calibri;
font-size:1.5em;
}
Demo
You can do that floating the image and adding overflow: hidden to the text wrapper:
#printnotice img {
float: left;
}
#printnotice span {
overflow: hidden;
display: block;
}
I've been having a problem with these boxes. The thing is that I need to make the text align always in the middle of the box + image no matter how many lines it has.
Have a look at the example bellow, many thanks:
HTML (I'm using 960 grid)
<div class="grid_4 prod-box-small alpha">
<h5>Shampoos</h5>
<div class="prod-img-box-small"><img src="images/product_small_1.jpg" alt="" /></div>
</div>
CSS
.prod-box-small {
border:1px solid #e4e4e4;
min-height:115px;
padding-right:12px;
padding-left:20px;
margin-bottom:20px
}
.prod-box-small h5 {
color:#820c8e;
float:left;
font-weight:600;
max-width:100px;
padding-top:42px;
padding-bottom:22px
}
.prod-img-box-small {
width:100%;
display: block;
padding:0;
max-height:105px;
margin-right: 0;
text-align: right;
line-height: 115px;
}
.prod-img-box-small img {
max-width:100%;
max-height:100%;
vertical-align: middle
}
Format the h5 using display:inline-block, so vertical-align can work on it, and give it a width - like this: http://jsfiddle.net/Cds5q/
(h5 and img elements are written without any whitespace between the tags here, otherwise you will get the width of a space character between them, and then they won’t fit into the div element exactly.)
stripped down to the important parts of the code: http://jsfiddle.net/aETC4/
you can use display: table for this. With vertical-align: middle your headline will be arranged centered inside the imaginary cell
simplest way us use margin-left: and margin right in percentage. you can check percentage value by debugger tool.
Ok so I have a an anchor element within a div with a fixed width, the anchor element needs to remain inline because the text that it holds is dynamic and it has a background because it is a button. I want the background of the button to only be the size of the length of text too. Is there a way to do so?
<div class="wrap">
<a class="button>Start »</a>
</div>
.wrap{
width:900px;
background:white;
}
a{
display:inline;
background:black;
}
I think
.wrap{
width:900px;
text-align: center;
}
will do the trick
See
http://jsfiddle.net/jEsRG/3/
One would tink that changing :hover of a parent element applies the transformation to each of the child elements. However,
<a href="" class="pressRelease"><div class="pressRelease">
<div class="timestamp">
<p class="timestamp">02 Feb 2012</p>
</div>
<div class="pressReleaseTitle">
<p class="pressReleasetitle">release title</p>
</div>
</div></a>
div.pressRelease :hover {
background-color:#F2F2F2
}
div.timestamp {
float:left;
width: 110px;
padding-top:10px;
padding-bottom:21px;
}
div.pressReleaseTitle {
float:right;
width:498px;
padding-top:23px;
padding-bottom:21px;
padding-left:25px;
}
a.pressRelease {
text-decoration:none;
color:#767676;
display:block;
background-color:#063
}
I have this code in the HTML and CSS files, and the behavior is pretty odd: when I hover over the timestamp, only timespamp background color is changed, while the color of press release title remains unchanged. Obviously, I want the whole press release to be highlighted
Any ideas on how to fix this?
Thanks in advance
Error:
Replace:
div.pressRelease :hover
With:
div.pressRelease:hover
There should not be any space before :hover.
Suggestions:
The way you have written your HTML is not valid. An inline element <a> cannot contain a block element <div>.
The browsers will ignore the surrounding <a> tag. So, if you give a code like:
<a><div><p></p></div></a>
It will be rendered as
<a></a><div><p></p></div>
Try giving float:left to parent div as it is not wrapping child elements with 'float'
in addition to the error fix mentioned by Praveen
div.pressRelease {
float: left;
}
Add oveflow:auto to a tag to wrap the inner elements.
And remove div from div.pressRelease:hover
.pressRelease:hover {
background-color:#F2F2F2
}
div.timestamp {
float:left;
width: 110px;
padding-top:10px;
padding-bottom:21px;
}
div.pressReleaseTitle {
float:right;
width:498px;
padding-top:23px;
padding-bottom:21px;
padding-left:25px;
}
a.pressRelease {
text-decoration:none;
color:#767676;
display:block;
background-color:#063; overflow:auto
}
DEMO
I am trying to vertically align a SPAN element in the middle of a parent element.
This is what I am doing:
I am trying to get both the username and password labels to be vertically aligned (middle) with the input boxes.
This is my HTML code:
<div class="login_field_wrap">
<span>Username</span>
<input type="text" autocomplete="off" spellcheck="off" id="username" name="username">
<div class="clear"></div>
</div>
This is what I have tried:
.clear { clear:both; }
.login_field_wrap span {
float:left; vertical-align:middle; font-size:13px; color:#333; font-weight:bold; }
.login_field_wrap input {
float:right; vertical-align:middle; padding:8px 5px; border:solid 1px #AAA;
margin:0px; width:250px; }
Vertically aligning an image element inside of this wrapping DIV works absolutely fine, well in Chrome anyway, it just won't align with my SPAN!
Any help would be amazing.
Vertical aligning via CSS can be tricky, and while CSS3 brings about a slew of goodies to help with that, CSS3 support is lackluster in the current browser market.
To achieve this effect I set the line-height property of the child element equal to the height of its containing element.
For example, I would use the following CSS:
.login_field_wrap { height:30px; /* or whatever is appropriate for your design */
.login_field_wrap span { height:30px; line-height:30px; }
.login_field_wrap input { height:30px; line-height:30px; }
The only downside of using line-height to vertically align something is if the text overflows onto a second line, in which case your design will essentially break.
Just remove the float property from your span class and set it to display:inline-block and the vertical-align:middle property will work, like so:
.login_field_wrap span {
color: #333333;
display: inline-block;
font-size: 13px;
font-weight: bold;
text-align: left;
vertical-align: middle;
}
Edit: cleaned up your code a bit, here is a demo that should work across browsers.
http://jsfiddle.net/kUe3Y/
I found the easiest way to do this is to set the parent container display property to table and the child display property to table-cell
#parent{
display:table;
}
#child{
display:table-cell;
vertical-align:middle;
}
I was able to get this to vertically align an anchor element inside a div.
I put it into the terms of your question in this jsFiddle.
I have never been able to get vertical-align to work in anything other than <td>s.
A workaround I commonly use would be to define a height for .login_field_wrap, then set the line-height property in your <span> to be equal to .login_field_wrap's height.
I think text-align:center; should work on elements too. If I am not mistaken, that usually works even if not on text.