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
Related
This is the html code:
<div class="produto_title">
<h2 th:text="${produto.name}"></h2>
Baixar
Comprar <span th:text="${produto.preco}"></span>
</div>
Could anyone give me a hint how to place the three items inside .produto_title in a same line (h2 floating at left and the two a floating at right).
Also, h2 has a border around item and the a is displayed like a button; I want add a line behind crossing all the "line" formed by this three elements, like this:
jsfiddle: https://jsfiddle.net/klebermo/sf7a6fnj/5/
ps.: also, how let the content of tag <span> inside the button, like the text?
An hr is a block element that's essentially just a line with a border.
I'd recommend sticking one of those at the top of the container and giving it a negative margin that vertically centers it in the parent. position: absolute is more trouble than it's worth.
https://jsfiddle.net/JackHasaKeyboard/0juqg4j7/
As for aligning the elements to the left and the right, I'll let you figure that out. There's many ways to accomplish it, the simplest way being with float.
I would look at twitter's bootstrap, specifically the row and col components.
You could do
<div class="row">
<div class="col-md-4">
// something here
</div>
<div class="col-md-4">
// something here
</div>
<div class="col-md-4">
// something here
</div>
</div>
This will all be displayed on the same line, splitting the row into equal thirds
btns{
height: auto; //Fix the span not being in the element
margin-top: 20px; //line everything up with the top of the heading element.
}
As for the line you can make a div and give it a absolute position (remember to give parent a relative position) and then position it accordingly.
.parent{
position: relative;
width: 100%;
}
.line{
height: 4px;
background-color: #000;
position: absolute;
z-index: -1;
top: 50%;
width: 100%;
}
This is a very bare-bones answer but it will be a start for you to go off.
For the first question, you can do that easily by manipulating margin or vertical-align properties. For example, if you put margin: 30px 5px; on your btn elements, it would be on the same line-ish.
Secondly, the <span> problem: if you set fixed width: 60px; of element (in your case .btn_comprar), text would either overflow from button to the right or bottom. Try setting width: 90px; or more on button elements, or height: auto; if you need it to be fixed.
Updated fiddle
First of all, you can't set a fixed width on a button if you want the text to not wrap. I recommend leaving the buttons at a width: auto and using padding to control the spacing around the text. I'd also bundle the styles for both button selectors, as they're exactly the same
Secondly, the only way (I know of) to get items to vertically align while they're float: right is by manually pushing them down, so I recommend making your buttons position: relative and setting a top: 25px;
/* Bundled both buttons together as they share the same styles */
.btn_free,
.btn_comprar {
float: right;
/* width: 60px; Removing this to allow the text to set the button width */
/* height: 20px; Removing this to let the line-height set the button height */
background: silver;
border-radius: 5px;
padding: 1px 15px;
box-shadow: 1px 1px 1px #000;
/* display: block; Removing this as floats are automatically display: block; */
/* text-align: center; Removing this since the text is already setting width */
background-image: linear-gradient(to bottom, #f4f5f5, #dfdddd);
font-family: arial;
font-size: 12px;
line-height:20px;
position: relative; /* Pushing buttons down a bit */
top: 25px;
margin: 0 10px; /* Spacing buttons out */
}
.btn_free:hover,
.btn_comprar:hover{
background-image: linear-gradient(to bottom, #c3e3fa, #a5defb);
}
Thirdly, remember to use a clearfix so the .produto_title container maintains height!
.produto_title:after {
content: "";
display: table;
clear: both;
}
Lastly, rather than using another div to make the line, I'd use the :before psuedo-element on .produto-title (can't use :after if you're also doing a clearfix).
.produto_title:before {
content: '';
height: 1px;
background: #000;
width: 100%;
position: absolute;
left: 0;
top: 50%;
display: block;
}
Here's a working demo:
https://jsfiddle.net/zcqLbg4h/1/
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;
}
.calloutWrapper
{
background: green;
height: 50%;
text-align: justify;
-ms-text-justify: distribute-all-lines;
text-justify: distribute-all-lines;
}
.callout {
width: 24%;
min-height: 100%;
vertical-align: top;
display: inline-block;
*display: inline;
zoom: 1;
background-color: blue; }
.stretch {
content: '';
width: 100%;
display: inline-block;
font-size: 0;
vertical-align: top;
}
http://jsfiddle.net/yux07nom/
There is white space after the "callouts" seen with the blue backgrounds. This extends beyond the green background of "calloutWrapper" I believe its caused by the .stretch applied to the span.
First off you close out the body twice which doesn't cause your problem but should be resolved
</body>
<script>
</script>
</body>
Then the white space is caused by your .stretch span
display: inline-block; is the culprit
Remove that and your good to go.
A bit more info about what you're trying to achieve with that span could help provide a better answer.
If you are trying to achieve responsive boxes you could use a css responsive grid template like bootstrap or foundation.
Alternatively you could just float left and add margin right to the first 3 elements.
eg
http://jsfiddle.net/yux07nom/5/
<div class="calloutWrapper">
<div class="callout">Callout</div>
<div class="callout">Callout</div>
<div class="callout">Callout</div>
<div class="callout last">Callout</div>
</div>
And the CSS
.callout {
width: 24%;
min-height: 100%;
background-color: blue;
float:left;
margin-right:1.3333333333%;
}
.callout.last{
margin-right:0;
}
I'm not sure there's an ideal solution to this. Your best bet is to set the font size of the .calloutWrapper div to zero and then reapply a useful font-size value to the .callout divs, like this : http://jsfiddle.net/2dgx98ye/
Note however, that some older browsers, particularly some used on mobiles, try to apply a minimum font-size which breaks this. In modern browsers, even when the have a minimum font-size configured, do not enforce it on elements where the font-size is 0.
Inline-block elements will preserve one space in the HTML. Two choices:
Have no space between those inline-block elements in the HTML.
Float:left those inline-block elements
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/
I'm working with a div that's only holding text. It's using absolute positioning to center itself on top of an image div that is using relative positioning . I can center the div horizontally in CSS if I use
div {
text-align:center;
width:100%;
}
But when I try to center it vertically using
div {
text-align:center;
height:100%;
}
it doesn't vertically center. I'm guessing this is because text-align:center only specifies horizontally.. How could I get around this? I've seen a couple solutions that would work if the outer div is a fixed size, but the outer div is not a fixed size. It's fluid so I need this to work fluidly as well. I've tried using top:50% but I want it perfectly centered... I'm pretty inexperienced so go easy on me
As you guessed, you are right, text-align: center; is used to align the text/element horizontally only and not vertically... so if you are talking about aligning the single line text vertically than you need to use line-height, which will be equal to the container height
Demo
div {
height: 100px;
width: 100px;
border: 1px solid #f00;
line-height: 100px;
text-align: center; /* Forgot this in the demo */
}
Where as if you are looking to vertical align entire element, than you can use either position: absolute; which I won't suggest you, instead use display: table-cell; nested inside display: table; parent
Demo 2
div {
height: 100px;
width: 100px;
border: 1px solid #f00;
display: table;
}
span {
display: table-cell;
vertical-align: middle;
text-align: center;
}
Try this...
div { position:absolute; top:50%; }
and go through
http://phrogz.net/CSS/vertical-align/index.html
Try this one. Make the code as
div { text-align:center; line-height:100%; }