I am trying to align the first two divs inside "product-details" class. I removed the last div with clear:both; I gave 150px width to the first div with class "text-center".I gave display:inline-block and position:relative to both of the first divs. I made width of the second div auto.
When I check the computed values in the inspect element the first div is not accepting the display:inline-block. It shows display:block; and the two divs are not aligned horizontally. I have had this situation before also.
div.text-center {
display: inline-block;
position: relative;
}
div:nth-child(2) {
display: inline-block;
position: relative;
}
<div class="product-details">
<div class="text-center">...</div>
<div>...</div>
<div style="clear:both;"></div>
</div>
div.text-center is not taking display inline-block instead shows display block in the element inspector
The code does work. I right clicked on the second ... and clicked inspect element. You can see in the "Elements" tab then in the "Styles" tab that the default display: block was overridden by display: inline-block. What browser are you using? This is on the latest version of Chrome that I am getting this result.
As pointed out above, the code should work. You can try and force it to work by adding an important rule
div.text-center {display: inline-block !important;}
I removed floats and display changes from block to inline-block as required. That was the only option. Also I need to remove width auto and give width in % for both divs to align them horizontally. This was the solution I found. Thanks for your answers.
A straight forward question.. is it possible to set the width in percentage for a span tag in CSS? for example:
<span style="width: 50%">...</span>
etc..
In my project I'm currently using divs but ofcourse after each div tag a line break gets inserted (which I don't want). So the most obvious solution to that is then to use span tags instead of div. But then I'm not able to define the width for the span tags.. Atleast not in a percentage kind of way.
Thanks in advance for any help!
Define the element as an inline block and you can control the width and height like a block element while keeping it inline with surrounding content.
#element {
display: inline-block;
width: 50%;
}
inline elements cannot have dimensions. do them to do so, and still remain inline, add:
display: inline-block
Add display: flex; on parent div style.
<div style="display: flex;">
<span style="width:50%">...</span>
<span style="width:50%">...</span>
</div>
I'd like to use the inline labels of the bootstrap css framework:
<span class="label">Default</span>
Unfortunately these labels are not vertically centered when used together with other elements.
<p>
<span class="label">test</span>This is a test heading.
</p>
Please see the full code for a visual example: http://jsfiddle.net/kvPpm/
I am aware of the line-height and absolute/relative positioning workarounds but was not able to apply them correctly.
How can I vertically center these labels?
Since <span> is an inline element by default you can just do:
span { vertical-align: middle|top|bottom; }
And it should work. http://jsfiddle.net/kvPpm/1/
But then <a> inside <span> is not semantically correct. You can just use <a> and style it display: inline.
http://jsfiddle.net/kvPpm/3/
.label { vertical-align: top; }
This worked for me when I wanted it to be aligned properly in a ul
Is there a way to prevent a line break after a div with css?
For example I have
<div class="label">My Label:</div>
<div class="text">My text</div>
and want it to display like:
My Label: My text
display:inline;
OR
float:left;
OR
display:inline-block; -- Might not work on all browsers.
What is the purpose of using a div here? I'd suggest a span, as it is an inline-level element, whereas a div is a block-level element.
Do note that each option above will work differently.
display:inline; will turn the div into the equivalent of a span. It will be unaffected by margin-top, margin-bottom, padding-top, padding-bottom, height, etc.
float:left; keeps the div as a block-level element. It will still take up space as if it were a block, however the width will be fitted to the content (assuming width:auto;). It can require a clear:left; for certain effects.
display:inline-block; is the "best of both worlds" option. The div is treated as a block element. It responds to all of the margin, padding, and height rules as expected for a block element. However, it is treated as an inline element for the purpose of placement within other elements.
Read this for more information.
.label, .text {display: inline}
Although if you use that, you might as well change the div's to span's.
A DIV is by default a BLOCK display element, meaning it sits on its own line. If you add the CSS property display:inline it will behave the way you want. But perhaps you should be considering a SPAN instead?
<span class="label">My Label:</span>
<span class="text">My text</span>
try this (in CSS) for preventing line breaks in div texts:
white-space: nowrap;
The div elements are block elements, so by default they take upp the full available width.
One way is to turn them into inline elements:
.label, .text { display: inline; }
This will have the same effect as using span elements instead of div elements.
Another way is to float the elements:
.label, .text { float: left; }
This will change how the width of the elements is decided, so that thwy will only be as wide as their content. It will also make the elements float beside each other, similar to how images flow beside each other.
You can also consider changing the elements. The div element is intended for document divisions, I usually use a label and a span element for a construct like this:
<label>My Label:</label>
<span>My text</span>
div's are used to give structure to a website or to contain a lot of text or elements, but you seem to use them as label, you should use span, it will put both text next to eachother automatically and you won't need to wright css code for it.
And even if other people tell you to float the elements it's best that you just change the tags.
I don't think I've seen this version:
<div class="label">My Label:<span class="text">My text</span></div>
<div id="hassaan">
<div class="label">My Label:</div>
<div class="text">My text</div>
</div>
CSS:
#hassaan{ margin:auto; width:960px;}
#hassaan:nth-child(n){ clear:both;}
.label, .text{ width:480px; float:left;}
Try applying the clear:none css attribute to the label.
.label {
clear:none;
}
use this code for normal div
display: inline;
use this code if u use it in table
display: inline-table;
better than table
try float your div's in css
.label {
float:left;
width:200px;
}
.text {
float:left;
}
I have many times succeeded to get div's without line breaks after them, by playing around with the float css attribute and the width css attribute.
Of course after working out the solution you have to test it in all browsers, and in each browser you have to re-size the windows to make sure that it works in all circumstances.
display: inline-block worked for me
To vertically-center align text in a table-cell, I use vertical-align: middle in the td.
But the above doesn't work with divs, spans, header and other non-table elements. So how can I vertically-center align text in such elements ?
There are many possibilities, each with it's advantages and drawbacks.
Here's a good article by Douglas Heriot explaining 5 others methods, and comparing them.
If it's a single line of text, you can set the line height to be the same height as the element.
Just use the following style :
<style type="text/css">
div {
vertical-align: middle;
display: table-cell;
}
</style>
That way, you are "displaying" the div as a table-cell and since vertical-align works with table-cells, you're text will be center-vertically aligned.