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/
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'm trying to use the vertical-align: middle on a layout to vertically center sometimes text, sometimes images, but it's only working on text. Can anyone tell me why?
HTML:
<div>
<img src="http://jsfiddle.net/img/logo.png"/>
</div>
<div>
<span> text </span>
</div>
CSS:
div{
width:200px;
height:200px;
background-color:red;
display:table;
margin:10px;
}
img, span{
display:table-cell;
vertical-align:middle;
}
http://jsfiddle.net/9uD8M/ I created a fiddle aswell
Put border: 1px solid black on your img, span tags, then inspect both elements in the browser dev. console. You'll notice that the span defaults to 100% height of its parent, while the image has a defined height (the height of the actual image).
So you're not really vertically aligning those elements relative to the div, you're just vertically aligning the text inside the span element relative to the span :)
If you really want to use tables for vertical-centering, here's the correct code:
http://jsfiddle.net/WXLsY/
(vertical-align and display:table-cell go on the parent, and you need wrapper table on them)
But there are other ways to do this (SO has many answers to this question, just use search)
Here is one way of fixing the problem:
HTML:
<div>
<span><img src="http://jsfiddle.net/img/logo.png" /></span>
</div>
<div>
<span> text </span>
</div>
Put your img in a span, the image is a replaced element, it cannot contain children content, hence, vertical-align will not work.
CSS:
div {
width:200px;
height:200px;
background-color:red;
display:table;
margin:10px;
}
span {
display:table-cell;
vertical-align:middle;
}
See demo at: http://jsfiddle.net/audetwebdesign/Fz6Nj/
There are several ways of doing this, you could also apply display: table-cell to the parent div element, but that would be a different approach.
In order to vertically align an image inside a table cell you need to give the image a display of block.
display: block
margin: 0 auto
the margin: 0 auto is to align the image to the center. If you want the image left aligned then don't include this. If you want the image right aligned you can add:
float: right
Thanks,
G
You can try by adding -> line-height: 200px; in the span style section, I think it might work;
I have a simple HTML page and it contains two divs aligned vertically. The page is scrollable because of second div. I want the first div's position to be fixed, or nonscrollable, so that only the second div is scrollable. I added position:fixed to first div's css but this time, the second div was placed on first div, so the first div disappears under the second div.
CSS
body {
width:1000px;
height:100%;
margin:0 auto;/*body ortalama*/
}
#div1 {
height:300px;
background-color:#00CC66;
}
#div2 {
display:block;
word-wrap:break-word;
padding:30px;
font-size:72px;
background-color:#FF3;
}
HTML
<div>
<div id="div1"></div>
<div id="div2">
<p>
<!--Content Here-->
</p>
</div>
</div>
Fixed is always relative to the parent window, never an element. Once the position is set to fixed its taken out of the document flow.
Fixed positioning is a subcategory of absolute positioning. The only difference is that for a fixed positioned box, the containing block is established by the viewport.
so in the second div2 add these
position:relative;
top:300px; /*Bump it down by the height of div1;*/
Hope it helps;
You should add a height and set overflow auto instead of scroll because with scroll you will have the scrollbar always even if the content is less than the specified height. For example:
#div2 {
background-color: #FFFF33;
display: block;
font-size: 72px;
height: 200px;
overflow: auto;
padding: 30px;
word-wrap: break-word;
}
Add this css to #div2 (you'll need to specify a height for #div2 otherwise the the scroll bar won't know where to start):
overflow-y:auto;
height:50px;
See the example here: http://jsfiddle.net/38xkn/1/ (scroll to the right first as you've set the body width to 100px, then you'll see the scroll bar for #div2).
Okay, here is another option. It's layout is somewhat different but it should get the job done. It uses absolute positioning on div1 to get it to the top, and a percentage width to stop it covering the scroll bar for div2. It's not perfect so you may need to tweek it slightly.
HTML
<body>
<div>
<div id="div1">a</div>
<div id="div2">
<p> SSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSDDDDDDDDDLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLDDDDDDDDDDDDDDDDDDDDDDDDDDDDDAMSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSDDDDDDDDDLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLDDDDDDDDDDDDDDDDDDDDDDDDDDDDD</p>
</div>
</div>
</body>
CSS:
body{
width:100%;
height:100%;
margin:0 auto;/*body ortalama*/
overflow:hidden;
}
#div1{
height:300px;
background-color:#00CC66;
position:absolute;
top:0;
width:97.5%;
}
#div2{
display:block;
word-wrap:break-word;
padding:30px;
font-size:72px;
background-color:#FF3;
overflow-y:auto;
max-height:50px;
padding-top:300px;
}
EXAMPLE:
http://jsfiddle.net/38xkn/6/
My image is staying at the top. Code using:
#header_div{
min-height:200px;
}
#header_div img{
display:block;
vertical-align:middle;
padding:5px 10px;
}
<div id="header_div">
<a href="#">
<img width="250" height="75" src="./images/header_logo.png" />
</a>
</div>
On a side note, should I close image tags with />?
#header_div
{
min-height:200px;
display: table-cell;
vertical-align:middle;
}
You will no longer need the vertical-align:middle; or display:block; on the img style and you probably can remove the top/bottom padding as well.
good write-up on centering an image in a box:
http://www.brunildo.org/test/img_center.html
vertical-align doesnt work like that. you can apply the image as a background-image to the parent div or to the anchor, and use background-position: center center.
if youd like an anchor's inline content to be centred vertically, one way to do it is to set the element's line-height in px to the total height required.
I have icons. Problem is they do not vertically align to the middle like everything else (text, input). My html structure is something like this:
<div class="i_contain_things">
<div class="i_float_left"><checkbox/></div>some text
<div class="i_float_right">
<span class="sprite icn1">my sprite</span>
<span class="sprite icn2">my sprite</span>
</div>
</div>
.i_contain_things
{
clear:both;
margin-bottom:10px;
vertical-align:middle;
}
.i_float_left
{
padding:0 3px 0 3px;
float:left;
display:inline-block;
}
.i_float_right
{
padding:0 3px 0 3px;
float:right;
display:inline-block;
vertical-align:middle;
}
.sprite
{
display:inline-block;
background: url(../img/icn_sprite_1.png);
width: 16px;
height: 16px;
vertical-align: middle;
}
.icn1{background-position:0,0}
.icn2{background-position:0,16px}
my sprite is always aligned to the bottom, while the checkbox and text are in the middle.
This is not going to work, a span is an inline element so as soon as you remove the text, it will collapse; height and width won´t do anything.
I´m not sure what you want to achieve exactly, but it seems to me that you need to put your sprite as a background to one of the elements you already have (like .i_contain_things), and not put it in a separate element.
If you do need to put it in a separate element, you need to make sure it´s a block level element (for example a div or a span that's set to display:block). That element needs to be positioned where you want it.
You need to specify the background-position property. Like so:
sprite { background: url(../img/icn_sprite_1.png) 50% 50% no-repeat;
Where the first number is axis-x and the second number is axis-y You can use percentages, pixels, or keywords (right, top, center) to declare the position of the background image.
http://www.w3schools.com/css/css_background.asp