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/
Related
I'm trying to center an image inside a span. But it doesn't work.
Here is a link to my code: jsfiddle
<div>
<label>
<span>left span that can have more than one line</span>
<span><img class="redcross" /></span>
</label>
</div>
the class "redcross" is what I want to center vertically
can someone help me?
Change your css:
.button {
position:absolute;
width:24px;
height:100%;
top:3px;
right:0;
}
top 0 to 3px;
Remove right and margin-right, Add position: absolute and margin-top: -11px
.redcross {
float: right;
display: inline-block;
background-color: #94B548;
/*background-color: rgba(0,0,0,.3);*/
background-position: center center;
background-repeat: no-repeat;
background-image: url("data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22iso-8859-1%22%3F%3E%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20%20width%3D%2214px%22%20height%3D%2214px%22%20viewBox%3D%220%200%2014%2014%22%20style%3D%22enable-background%3Anew%200%200%2014%2014%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpolygon%20style%3D%22fill%3A%23FFFFFF%3B%22%20points%3D%2211.949%2C3.404%207%2C8.354%202.05%2C3.404%20-0.071%2C5.525%207%2C12.596%2014.07%2C5.525%20%22%2F%3E%3C%2Fsvg%3E");
-webkit-border-radius: 1em;
border-radius: 1em;
content: "";
display: block;
width: 22px;
height: 22px;
top: 50%;
position: absolute;
margin-top: -11px;
}
jsfiddle
I'm sure Mr. Alien means well. But I was there too. Anyway, a simple steps to get what you are looking for:
Change your .button class to
.button {
vertical-align: middle;
width:24px;
}
You see, the vertical-align property doesn't quite work how some people think it does. It only affects inline elements. Furthermore, it aligns it vertical relative to the current line. So, in other words, if you were to say have more than one line on a block of text to the left and a button to the right, this wouldn't work.
You would need to wrap that block of text in an inline-block and adjust the line-height accordingly to get this same effect for it to be vertically aligned. Essentially, the two elements (block of text and img) would be behaving like text. This is important to understand especially in a screen responsive environment.
I would do it with flexbox.
It's a very recent feature but very useful.
Just add this lines to your .button class.
display: flex;
align-items: center;
Here you have it working. The green circle gets deformed but I would consider using a fixed image instead the border-radius.
Here you can see its browsers compatibility
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;
}
Lets take two images as an example
With float: left;
Without float: left;
HTML
<h6><span>Sign Up</span></h6>
CSS
h6:before {
content: url("images/arrow.png");
padding-right: 8px;
float: left; // Here lies problem
}
Question
Why without float: left; text (Signup) goes down ? What's science behind this ?
The default display mode of a pseudo element is display: inline; and the default vertical alignment is vertical-align: baseline;. This means that the image will be aligned to the baseline of the text.
When you float an element its display mode becomes display: block; and it is removed from the document flow. Vertical alignment is no longer a factor and in this case the top edge of the span is now aligned with the top edge of the floated pseudo element.
As Luis P. A. and Paulie_D allude to in the comments, changing the vertical alignment will allow for the non-floated pseudo element to be aligned to the middle of the text:
h6:before {
content: url("http://placehold.it/20x20");
display: inline-block;
padding-right: 8px;
vertical-align: middle;
}
h6 span {
vertical-align: middle;
}
<h6><span>Sign Up</span></h6>
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'm trying to place buttons on the left and the right side of a scrollable div. See this jsfiddle[1] where they are still wrapped. So I changed the display of content and btn to inline-block. See this next version of the jsfiddle[2]. That sort of worked, but the buttons are not nicely aligned. And I actually don't have any idea why. So how come and why is that?
I am confused with you saying buttons are not nicely outlined, but I guess you meant align, than you have to use vertical-align: top; as you are using display: inline-block; so your buttons are aligned to the baseline.
.btn {
width: 30px;
height: 40px;
display: inline-block;
vertical-align: top;
}
Demo
You can also float all your elements to the left as #Jarno suggested, but if you are going with float than make sure you clear your elements using clear: both; property, else you will end up with undesired positioning of your elements.
make all elements floating ~> DEMO
.content {
width: 300px;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
height: 40px;
display: inline-block;
float: left;
margin: 0 10px;
}
.btn {
width: 30px;
height: 40px;
display: inline-block;
float: left;
}
OR you can use vertical-align for elements to fit each other vertically
You could use float:left; on .content and .btn.
Also, don't forget to put overflow:hidden; on your .container.
Example
You need to add float positions to each .btn. float left for the left arrow and float right
Add the vertical align to the buttons:
.btn {
width: 30px;
height: 40px;
display: inline-block;
vertical-align: top;
}
http://jsfiddle.net/y84VA/7/