I have a HTML code as;
<div class="left">
<span class="panelTitleTxt">Title text</span>
</div>
My CSS is as follows;
.left {
background-color: #999999;
height: 50px;
width: 24.5%;
}
span.panelTitleTxt {
display: block;
width: 100%;
height: 100%;
}
Now how do I center align the span text inside the div? (Assume that the "left" div after the % conversion gets a px width of 100px)
I tried the standard way of using margin:auto, but that is not working.
Also I want to avoid using text-align:center.
Is there some other way of fixing this?
You are giving the span a 100% width resulting in it expanding to the size of the parent. This means you can’t center-align it, as there is no room to move it.
You could give the span a set width, then add the margin:0 auto again. This would center-align it.
.left
{
background-color: #999999;
height: 50px;
width: 24.5%;
}
span.panelTitleTxt
{
display:block;
width:100px;
height: 100%;
margin: 0 auto;
}
If you know the width of the span you could just stuff in a left margin.
Try this:
.center { text-align: center}
div.center span { display: table; }
Add the "center: class to your .
If you want some spans centered, but not others, replace the "div.center span" in your style sheet to a class (e.g "center-span") and add that class to the span.
Related
I have a div. It is 100% width and 150 pixels tall. I nested an <h1> tag in it, and it sits under an image instead of next to it.
<body>
<div class='topbar'>
<img src='img source is here'/>
<h1>
GO COSMOS!!!
</h1>
</div>
</body>
CSS:
body {
background-color: #aaffaa;
}
.topbar {
width: 100%;
height: 150px;
background-color: #00bb00;
}
img {
height: 150px;
width: 150px;
}
h1 {
}
A heading (<h1>,<h2>,etc) is a block level element:
A block-level element occupies the entire space of its parent element (container), thereby creating a "block." This article helps to explain what this means.Source: MDN Docs
Simply display the h1 inline-block like:
h1 {
display: inline-block;
vertical-align:top;
/*vertical-align aligns it at the top of the image, instead of the baseline*/
}
JSFiddle Example with your code
All header tags are block by default, meaning it spans the width 100%. If you want it side-by-side another element you need to change the display like so:
h1 {
display: inline;
}
Another option would be to float the two inside elements left. See fiddle: https://jsfiddle.net/DIRTY_SMITH/8gy5oprw/1/
img {
float: left;
height: 150px;
width: 150px;
}
h1 {
float: left;
}
As the title tells you, I want to center a parent div where the parent div retrieves the width of all its child divs.
This is the code I used to retrieve the width of the child divs:
.parent
{
background-color: yellow;
display: inline-block;
font-size: 0;
/*How could I center this div? I used to do: margin-left: auto; margin-right: auto;
however for this I need to assign a fixed width. I want to assign the width of the
content inside the div.*/
}
.child
{
height: 100px;
width: 100px;
border: 1px solid red;
display: inline-block;
}
Source: http://jsfiddle.net/53me4f8e/
How can I center this div?
Centrally align the text of the parent element, in this case, body. .parent is displayed as an inline-block, which means it behaves like an inline element and is therefore centred:
body{
text-align: center;
}
Note, because text-align is inherited, you may want to revert the text alignment back to left (or right, depending on preference) for .parent:
.parent{
text-align: left;
/* Other styles.. */
}
JSFiddle
This should be:
.parent{
display: block;
text-align:center;
}
updated your fiddle
How can I make the two divs sit side by side at 50% width?
DEMO
HTML
<div class="big_div">
<div class="pic_1 pix">
<img src="pic1" width="50%" height="30%"/>
</div>
<div class="pic_2 pix">
<img src="pic2" width="50%" height="30%"/>
</div>
</div>
CSS
.pix{
display:inline;
}
Please comment, any logic in the right step helps.
If you don't want to use floats then you could use the display: table technique. It'll allow you to keep adding more and they'll fit perfectly across the container.
You'll need to remove the inline percentage width and heights on the images.
.big_div {
display: table;
}
.pix{
display: table-cell;
width: 1%;
vertical-align: middle;
}
img {
width: 100%;
height: auto;
}
Demo
If you don't want to use float, use display:inline-block (here's the JSFiddle.)
CSS
.big_div { font-size:0; }
.pix{
display:inline-block;
width:50%;
}
.pix img { width:100%; }
We have to set the font-size to 0 because otherwise there will be space between the divs (more information.)
Don't set the width & height on the image tag. Keep them at 100% it'll distort the image if you do.
Make the .pix class width 50% and float left or right. It can't be inline & maintain width. The divs must remain display: block to have layout.
Anyway heres an example http://jsfiddle.net/bamboo/T3p7h/1/
.big_div {
width: 60%;
margin: 0 auto;
background: #00B7FF;
}
.pix {
width: 50%;
float: left;
}
Working fiddle
I've changed a bit on your html and use this css:
.big_div {
width: 100%;
height: 100%;
}
img {
width:50%;
height:30%;
float: left;
}
OR you can use display: inline-block and set font-size:0 on parent element
Fiddle
For some reason, margin:auto is not working.
HTML
<body>
<div id="background">
<div id="header">
<div id="title">Welcome</div>
</div>
</div>
</body>
CSS
#background {
min-width: 960px;
}
#title {
display: block;
margin: auto;
background-color: blue;
}
This just just draws a blue line across the top of the screen with the word 'Welcome' on the left. Why isn't my margin:auto working?
The correct syntax for horizontally centering via margin is: margin: 0px auto; as this will set the left and right margin to auto. You need to set a width on it if you use this approach, because the width is 100% by default.
Alternatively, you can also use text-align:center if you are just centering text.
Working jsFiddle using text-align:center.
Alternative jsFiddle.. I don't know what style you are trying to achieve.
The #title div will expand to fill its parent, #header, which in turn, expands to fill its own parent, #background, which has a width of at least 960px.
Therefore, #title if full width so it is centered, and by default, the text is left justified (at least in Western European languages).
If you want the #title to have a shrink-to-fit width, you can try display: inline-block.
To center #title horizontally, add text-align: center to its parent container, #header.
For example:
#background {
min-width: 960px;
}
#header {
text-align: center;
}
#title {
display: inline-block;
background-color: beige;
}
Alternatively, you can achieve the same result using display: table:
.ex2 #header {
text-align: left;
}
.ex2 #title {
display: table;
margin: 0 auto;
background-color: beige;
}
See demo at: http://jsfiddle.net/audetwebdesign/kAhnx/
I have to divs layouted as display: inline-block. Intentionally, I want these two divs (tileImage, title) to share the 300px width of the parent div (preview). Thus, I have set their width to 50%. For some reason the second div is moved to the next line.
Changing the width of div "title" to 48% will move the div next to the div "titleImage". There you notice the space in between. Where does this space come from? How do I get rid of it?
Here is the JFiddle: http://jsfiddle.net/SFDPe/2/
Thanks!
You should float your elements to the left and right, instead. Then, make sure you set height: auto; and overflow: auto; to the parent container. This ensures that the .parent container actually overflows and grows automatically when elements are floated inside of it.
JSfiddle here.
.preview {
width: 300px;
border: 1px solid red;
vertical-align: top;
height: auto;
overflow: auto;
}
.title {
width: 50%;
background-color: olive;
float: right;
}
.tileImage {
width: 50%;
background-color: orange;
float: left;
}
Instead of using display:inline-block use, float:left for both divs.
http://jsfiddle.net/SFDPe/3/
Take a look onto this article:
Fighting the Space Between Inline Block Elements
Maybe you can use float: left; instead? Like this:
.preview, .preview div {
float: left;
}