I am trying to get my text element to be vertically centered in a larger div, which is colored in blue. I specifically defined the height and alignment as follows:
vertical-align: top; //middle actually puts it even lower
height: 83px; //the same as the larger area
However, I cannot get this to be vertically aligned in the center of the blue box. Any help would be appreciated!
You can do this in several ways:
center the division:
div.div{
text-align: center;
}
<div class="div">
Hello world!
</div>
Use a p tag to align the text to the center
div.div{
background-color: #00ff00
}
p.p{
text-align: center;
}
<div class="div">
<p class="p">Hello World!</p>
</div>
You can set the blue div position to relative then add the following to your test class :
.test{
position:absolute;
top:calc(50% - 38px); //76/2 = 38 to get the center of your span.
}
jsfiddle
I found my answer. I needed to simply add a text-bottom vertical alignment to the image that was a part of the light blue div. Thanks for the answers anyways guys!
Related
I currently have parallelogram that was created with a div and the css property clip-path. This shape is stake to the stop and bottom of the screen with a dynamic width as well. I'm trying to figure out how to horizontally (not vertically) center the content.
My issue is that any text that I try to center seems to center to the rectangle, not the parallelogram that I have created.
So far I've tried to use left and right padding, percentage based margins, and clip paths of the content within the div to no avail.
I've attached a codepen with where I'm at so far. Any help would be greatly appreciated.
You need to add
text-algin-center;
to your
.sidebar-callout-padding and
display:inline-block;
to your paragraphs (give them an unique ID)
#wrapper {
background-color: yellow;
text-align: center;
}
#yourdiv {
background-color: green;
display: inline-block;
}
<div id="wrapper">
<div id="yourdiv">Your text</div>
</div>
Want to know the reason for this behavior.
CSS
div {
display: inline-block;
margin-right: 2px;
width: 20px;
background-color: red;
}
Empty div
<div style="height:20px;"></div>
<div style="height:40px;"></div>
<div style="height:60px;"></div>
<div style="height:80px;"></div>
behavior: element increases from bottom to top (height)
div with text
<div style="height:20px;">20</div>
<div style="height:40px;">30</div>
<div style="height:60px;">40</div>
<div style="height:80px;">50</div>
behavior: element increases from top to bottom (height)
see it in action: http://jsfiddle.net/8GGYm/
Basically it got to do with the way that vertical-align: is calculated. So if you put vertical-aling:bottom; attribute in the css then you will notice it will be the same with and without text.
you can read the this for more details.
When the div has no content, padding is not drawn in the box (i.e. when when 0, if there is content, the browser calculates where the padding would be). so there is a little difference in calculating with and without text.
Hope this is helpfull.
please see here: http://jsfiddle.net/dd24z/. By default text is vertical-align: top, but you can change that behavior:
div {
display: inline-block;
margin-right: 2px;
width: 20px;
background-color: red;
vertical-align: bottom;
}
http://www.w3.org/TR/2008/REC-CSS2-20080411/visudet.html#line-height
'vertical-align': baseline
Align the baseline of the box with the baseline of the parent box. If the box doesn't have a baseline, align the bottom of the box with the parent's baseline.
Add
vertical-align: bottom;
to your CSS. Hope it works as you want.
I guess this can be explained by the text alignment, independently from divs.
Text, when placed in a div, is vertically aligned to top-left by default. Those divs without text align beside each other (inline-block) expanding the page downwards. If you add another div, you'll see the second header going further down.
<h1>Empty div</h1>
Some text
<div style="height:20px;"></div>
<div style="height:40px;"></div>
<div style="height:60px;"></div>
<div style="height:80px;"></div>
continuing here
<h2>Div with text</h2>
Some text
<div style="height:20px;">20</div>
<div style="height:40px;">40</div>
<div style="height:60px;">60</div>
<div style="height:80px;">80</div>
continuing here
...
div {
display: inline-block;
margin-right: 2px;
width: 20px;
background-color: red;
}
Fiddle
In the above fiddle, you can see that the text line is the "guideline".
Maybe this is the explanation: once the divs have text in them, they will align it with the surrounding text and, if inexistent, then they align their bottom line.
I'm sorry, maybe not very clear but I hope you understand my view.
I am trying to put 3 divs in a row [1][2][3].
[1] should have a background image repeating to the left
[2] must be centered. its 1000 px
[3] should have a background image repeating to the right
The problem is that [1] appears on the top of[2],[3] below [2] and the background images for [1] and [3] don't appear. If I just put a color instead of the image,it appears(the path is correct).
HTML:
<div id="topleft">left</div>
<div id="top" >
<div class="container"/>
<div id="header">Menu</div>
</div>
</div>
<div id="topright">right</div>
CSS:
#topleft {
background-image: url(images/leftrepeat.png);
background-repeat: repeat-x;
float: left;
}
#top .container {
background-image:url(images/center.png);
background-repeat:no-repeat;
min-height:151px;
width:1000px;
float: center;
}
#topright {
background-image: url(images/rightrepeat.png);
float: right;
background-repeat: repeat-x;
}
You need to have something inside the divs in order to have a background image to appear. You can´t have empty divs with just background image...
Like above said, try setting the width and height on the divs and you could put some text inside maybe with the same color as the background image. Or you could put a transparent image with the right width/height inside the div and then the background image behind...
And yeah, float left on all!
Try setting the width on the divs in percentage instead. This way they should automatically adjust after the screen size/resolution.
Changing all the floats to
float:left;
will stack the three elements horizontally beside each other.
You need to move your 'topright' above the 'container' in the HTML
<div id="topleft">
left
</div>
<div id="topright">
right
</div>
<div id="top" >
<div class="container"/>
<div id="header">
Menu
</div>
</div>
</div>
Then the CSS for your container should remove the float: center; and add margin: 0 auto;
As for the images, just be sure of the paths as they should be appearing, and that the divs are large enough to display a background image.
float:center; isn't valid - to put elements on the same line you can float them all left. For the rightmost element (#topright) you can optionally float it right, depending on your layout.
If you want #top to be on the same line as #topleft and #topright, it needs to be a floated element, rather than .container.
For your background images - have you tried setting a width and height for #topleft and #topright?
Let's say I have 2 divs inside a container div like so:
<div id="wrapper">
<div id="title">A</div>
<div id="text">Some text... Some text... Some text... Some text... Some text... Some text... Some text... Some text... Some text... Some text... Some text... </div>
</div>
As you can see from the title, I'm trying to align the divs title and text vertically and next to each other inside the parent div wrapper. So far my css is this:
#wrapper
{
vertical-align:middle;
display:table-cell;
}
#title
{
background: url('path_to_purple_background') no-repeat;
width:45px;
height:45px;
color:white;
}
#text {
width: 700px;
}
#title, #text {
display: inline-block;
vertical-align: middle;
}
But what I get so far is that the letter A is not centered inside my div title (it is instead positioned at the top-left corner of the div). Does anybody have an idea how I can fix this?
Thank you
Just a thought, but there is a text-align:center property that you can add into #title as well as line-height:HEIGHT OF #TITLE; you can add. This will align the A to the center of the circle, as well as set the line-height of the A to match the height of the circle container, thus vertically aligning it to the middle.
How about something like this? I set the display property of #test, #title to table-cell.
The use of vertical-align gets mistaken very often.
From the W3C:
The vertical-align property affects the vertical positioning inside a
line box of the boxes generated by an inline-level element.
So if you have got an inline image in an paragraph, you can use it to vertical-align it within a rule of text.
In your case, if you need to vertical-align only one rule, you can use the old line-height trick:
#title {
height: 45px;
width: 45px;
line-height: 45px;
}
I have been trying to do the following. I have a <div> element
which spans the whole width of its parent div. Inside of this
I would like to place A. some text and B. an image.
A. some text (either loose text or text enclosed in a <p>, <h2>,
or <span>, or <div> element), on the left.
B. an image defined via an <img> element whose both height and width
are known.
Other requirements:
There must be 12px of space between the text and the <img> element.
Important: both the text from A. and the image from B. must be
centered as a group.
The text from A. must be vertically centered in its enclosing space.
How can I achieve this effect? I have tried different things but cannot
manage to place the image to the right of the text and cannot manage to
have the text A. vertically centered.
Anyone know how to solve this simple problem?
Thank you all for your answers, seems CSS makes simple things so hard,
anyways:
div#content_whatsnew, div#content_bestsellers { clear: both; height: 108px; font-size: xx-large; text-transform: uppercase; margin-left: 380px; }
div#content_whatsnew p, div#content_bestsellers p { float: left; height: 108px; line-height: 108px; padding: 8px 12px 0px 0px; color: black; }
div#content_whatsnew img, div#content_bestsellers img { float: left; height: 108px; }
Is this what you are trying to achieve? http://dabblet.com/gist/3130292
Is this about right?
http://jsfiddle.net/89twb/2/
For aligning text, check this out.
And for placing elements next to each other, this.
This should work:
<div class="my-outer-container">
<div class="my-inner-container">
<div class="my-text">Here is my text, it is lovely text.</div>
<img src="my-image.jpg" alt="" class="my-image" />
</div>
</div>
.my-outer-container {
width:auto;
text-align:center;
}
.my-inner-container {
width:XXXpx; /* enter whatever the width you want here is */
margin:0 auto;
overflow:auto;
}
.my-text {
width:XXXpx; /* enter whatever the width you want here is */
float:left;
margin-right:12px;
}
.my-image {
width:XXXpx; /* enter whatever the width you want here is */
height:XXXpx; /* enter whatever the height you want here is */
float:left;
}
Then maybe use the vertical centering tip on the link provided above by #biziclop
The most intuitive way would be using 'vertical-align:middle;' but it often tends not the way you want it to work.
I did some research and found this code from here. http://phrogz.net/css/vertical-align/index.html
Hope this helps!
<style type="text/css">
#myoutercontainer { position:relative }
#myinnercontainer { position:absolute; top:50%; height:10em; margin-top:-5em }
</style>
<div id="myoutercontainer">
<div id="myinnercontainer">
<p>Hey look! I'm vertically centered!</p>
<p>How sweet is this?!</p>
</div>
</div>
In order to center a div, it has to have a fixed width. If it spans the width of its parent div, you can only then center things inside it. So it sounds to me like the best solution would be to place your text in a fixed-width left-floated div, and do the same for your image, and then place those both in a fixed-width holder div, which is centered with margin:auto;
Here's an example: http://dabblet.com/gist/3130148
Edit- I vertically centered the text by placing it in a table. Tables are the only surefire way to vertically center something cross-browser.