Need to vertically align images within a containing box like this:
<span class="image-box"><img src="/1_thumb.jpg"></span>
with this:
.image-box{
width: 75px;
height: 75px;
display: block;
float: left;
text-align: center;
// ????
vertical-align: text-top;
}
The vertical-align is not working correcty. How would I align this?
thx
Assign this CSS to the image vertical-align: middle; and add this line of CSS to the .image-box line-height: 75px;. The value for height and line-height should be the same.
Example: http://jsfiddle.net/SjKUa/1/
Add this and maybe change the 0 to however much space you would want between the images. This will line them up centered inside of your column which is what it seems like you are after.
.image-box img {
margin: 0 auto;
}
Related
vertical-align has always given me problems in the past and once again I'm met with a problem that I don't know how to solve.
I have this html:
<ul id="council-slider">
<li class="col-md-12" style="display: block">
<img src="somesource" />
<div class="council-spacer"></div>
<p>text content goes here</p>
</li>
</ul>
CSS:
#council-slider {
margin: 0 auto;
list-style: none;
min-height: 300px;
max-height: 400px;
}
#council-slider li img {
float: left;
height: auto;
width: 25%;
margin: 5px;
}
.council-spacer {
height: 300px;
width: 100px;
float: left;
}
#council-slider li p {
margin-top: 100px;
}
I want to be able to vertically align the image in the middle. The text is multiple lines that wrapped so using line-height will not work in this situation. Also the images can have varying heights.
There are multiple list items; I just used one in the example to simplify and reduce the html.
You should read up on where the vertical-align property has the ability to be applied.
Quoting from MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align
The vertical-align CSS property specifies the vertical alignment of an inline or table-cell box.
Since your element is not being displayed as either inline or table-cell vertical-align: middle; will not do you any good here.
You can, however, set your <div> styling to display: table-cell; and then vertical-align: middle
Alternatively, this can be achieved with CSS3 as hars pointed out, just make sure your user's browsers support CSS3
.valign-middle {
position: relative;
top: 50%;
Transform: translateY (-50%);
}
The way this works -
Set position relative to the parent/container (i.e. <li> in your case)
Move the image that you want to vertically align, down 50% of the container height
Move the image up 50% of the height of the image
Add a class to your img as below.
.verticallyCenter {
position: relative;
top:50%;
Transform:translateY (-50%);}
Refer This
Without seeing your actual css code it is hard to say, but you should use vertical-align: middle for all objects that you want to align and you may need to change the display of your paragraph to display: table-cell.
Will be easier using flexbox: display: flex; and align-items: center;
Demo
#council-slider {
list-style: none;
}
#council-slider li{
display: flex;
margin: 10px 0;
align-items: center;
}
.council-spacer {
width: 20px;
}
I've centered my text in my div but I've only managed to center it horizontally by using text-align: center
However I'm having trouble centering the text vertically. I've tried using vertical-align: middle; but it didn't work
Here is a codepen: http://codepen.io/anon/pen/Ioiaq
the code with the text is right at the bottom of the html panel the text is "INFO"
and here's the code so far:
<div id="inf" style="
text-align:center;
background-color: white;
position: absolute; top:50%; left: 45%; width: 10%; height: 6%;
z-index: 10;
display: inline-block;">
<span>INFO</span>
</div>
any ideas?
I don't mind what code is used to fix the alignment it doesn't have to be css.
To center a single line vertically, you can use CSS line-height whith the same value as the height value you are using.
line-height with a vertical-align: middle; is probably the best way to go if you aren't using JS.
FIDDLE
HTML:
<div id="inf">
<span>INFO</span>
</div>
CSS:
#inf {
text-align:center;
background-color: white;
z-index: 10;
display: inline-block;
width: 100%;
line-height: 400px;
vertical-align: middle;
}
You could use the CSS property vertical-align.
vertical-align: middle;
This question already has answers here:
Why is vertical-align: middle not working on my span or div?
(19 answers)
Closed 9 years ago.
Here is my code.
I have added the vertical-align property for the spans in the div with ed_button class but the third, fourth and the fifth boxes are displaying the spans at top positions not in the middle.
Am I doing anything wrong here?
You need to give the outer-div display: table. And float: left will fulfill your purpose of horizontal alignment.
.ed_button{
display: table;
float: left;
margin-right: 3px;
}
and the inner-div should have display: table-cell
.ed_button span{
display: table-cell;
vertical-align: middle;
}
Check out the DEMO here.
vertical-align property will work for table or table-cell
JSFiddle
since you have fixed dimension, i would suggest to remove span from multi-line and instead use line-height = div height trick for the purpose of single-line text
.ed_button span {
vertical-align: middle;
height: auto;
line-height:40px;
}
demo
I have added this to the CSS Part
.ed_button {
display: table-cell;
vertical-align: middle;
border-right: 5px #FFFFFF solid;
}
Working Fiddle
.ed_button{
background-color: #F9A11A;
clear: both;
float: left;
font-size: 14px;
height: 40px;
margin-bottom: 10px;
text-align: center;
width: 120px;
}
Use this css style for your code it 'll work fine
None of your text are alligned in middle. It is just beacause there is more text in the 1st and 2nd box that it seems to be in middle.
You can also try padding-top, margin-top or Position properties of css.
I have a span with a background image, but it aligns differently without text in it, how can i have them aligned independent of the content?
For this it has to be inline-block and it has to be a css only solution.
Here is an example.
HTML:
Test
<span class="test">Blafffff</span>
<span class="test"></span>
CSS:
.test
{
display: inline-block;
line-height: 30px;
border: none;
height: 30px;
width: 120px;
text-align: center;
margin-top: -15px;
background: url("http://i.imgur.com/vYiCjoF.png") no-repeat;
}
EDIT: Thanks for the answers so far, but it has to align with the other text around it, i updated the example
You are using display: inline-block; so the span will align to the baseline, hence use vertical-align: top; to align them consistently.
Demo
.test {
/* Other properties */
vertical-align: top;
}
Alternatively, you can also use float: left; here, than you won't need vertical-align property, but than you need to make sure that you clear the floating elements.
For more information on float and clear, you can refer my answer here and here.
http://jsfiddle.net/9YUdb/2/
.test
{
display: inline-block;
float: left;
}
To align with the text around it, you'll need to give the span some content. You can do that with a :before pseudo-element. Putting it a zero-width non-breaking space will do the trick. i.e.
.test:before {
content: '\FEFF';
}
See http://jsfiddle.net/9YUdb/6/
Im trying to make a picture display inline with text on it's right, AND at the same time positioned in the middle of the vertical axis to fit in the navigation bar.
At the moment, I can only get it to display inline but it always verges to the bottom of the bar rather than the top.
HTML:
<div id='profileBar'>
<img src='karl.png' width=25 id='profileBarPic'/>
Damen
</div>
CSS:
#profileBar {
float: right;
padding-right: 10px;
}
#profileBarPic {
width: 25px;
display: inline;
float: left;
padding-right: 10px;
}
What it looks like:
Text next to an image? That's how images have always worked. You can get the desired affect with a lot less markup:
<div id='profileBar'>
<img src='http://placekitten.com/50/50' id='profileBarPic'/>
Damen
</div>
And CSS:
#profileBarPic {
vertical-align: middle;
}
Fiddle
A little explanation. img is basically an inline element to begin with, so adding float and display: inline is not necessary.
By default img aligns with the baseline of its container (the bottom edge of an image will align with the bottom of a text line it is next to). vertical-align changes where the img should align itself to (in this case, you wanted the middle).
Try uploading a fiddle next time, I think this should fix it though:
#profilebar {
float: right;
padding-right: 10px;
display: table-cell;
vertical-align: middle;
}
put your text into a span or something so that you can put a display:inline-block on both it and the <img>. This way, you won't need the float:left. Then apply a vertical-align:middle
so:
HTML:
<div id='profileBar'>
<img src='karl.png' width='25' id='profileBarPic'/>
<span>Damen</span>
</div>
CSS:
#profileBar {
float: right;
padding-right: 10px;
}
#profileBar span {display:inline-block; vertical-align:middle; }
#profileBarPic {
width: 25px;
display: inline-block;
vertical-align:middle;
padding-right: 10px;
}