<div style='height:200px;'>
SOME TEXT
</div>
how do i align "SOME TEXT" at the bottom of the div using CSS without padding?
The absolute easiest way, though not-exactly using your code example, would be:
div {height: 400px;
width: 50%;
margin: 0 auto;
background-color: #ffa;
position: relative;
}
div p {position: absolute;
bottom: 0;
left: 0;
right: 0;
}
html
<div id="container">
<p>SOME TEXT</p>
</div>
Wrap your text in an element, anything from <p>, <span>, <div>...whatever, and position that element at the bottom of its container.
You can't do it in a simple way, at least not cross browser.
You can use the display: table; vertical-align: center;
You can use JS/ CSS expressions.
You can have another element inside the div, and position it absolute in relation to the div:
<div style='position:relative;'>
<div style='position: absolute; bottom:0;>
My Text
</div>
</div>
But really, as much as I hate to say, Tables is the KISS here (if you need to veritcaly center it).
TDs can vertically align text with vertical-align, but this does not work on DIVs. It is not considered good style to use tables to vertically align elements.
You cannot vertical-align text within DIVs with CSS. You can only use padding, margin, or absolute and fixed positioning to align an text vertically.
If you use absolute positioning well, you can vertically align the text by vertically aligning a container that the text is in. However, absolutely positioned elements do not take up "space" within their container, which means you have to set a margin or padding to offset that space in the container.
Eg:
HTML:
<div id="container">
<span id="text">Some text, Some text, Some text, </span>
</div>
CSS:
#id {
position:relative;
margin-bottom: 100px;
}
#text {
position:absolute;
bottom:0;
height: 100px;
overflow:hidden;
}
# id{
display:table-cell;
vertical-align:bottom;
}
Using flex, supported in most recent browsers
div {
align-items: center;
background: red;
display: flex;
/* Uncomment to align it horizontally */
/* justify-content: center; */
}
<div style='height:200px;'>
SOME TEXT
</div>
Related
Why when I specify a width property in my p element, the text doesn't flow around the div element ?
I know one the solution to this is to have float: left; in my p element too. Just looking for explanation, not finding for solution
div {
width: 200px;
height: 100px;
background-color: green;
opacity: 0.2;
float: left;
}
p {
background-color: yellow;
width:10px;
}
<div></div>
<p>Lorem Ipsum</p>
Block elements don't wrap around floats, their contained line boxes do. But since the width of the p element is less than that of the div element, there's no space for the line boxes of the p element to go beside the div element, so the first opportunity for the line box to be placed is below the div element. So wrapping around is exactly what the line box of the p element is doing.
It's probably a display issue.
You can try to set a display:inline-block to your <p> tag.
But I think to put one aside another you can better use flex-box:
Wrap your two or more elements inside a div or a section, and give this div a property display: flex.
By default, it will align those elements horizontally, and the property align-items: center is to align those elements based on the div's center.
<div id="container">
<div>One</div>
<p>Another</p>
</div>
<style>
#container {
display: flex;
align-items: center;
}
#container div {
/* ... Your previous div style */
margin-right: 15px;
}
</style>
Here is an example:
p, span, div,img {
text-align: center;
}
<p>Para</p>
<span>Span</span>
<div>Div</div>
<img src="https://www.google.com/images/nav_logo195.png" />
<div><img src="https://www.google.com/images/nav_logo195.png" /></div>
I found apply text-align: center on img directly doesn't work.
Does this mean it has to be wrapped in an empty div when a centered image is needed?
Is there a better way to do this?
text-align aligns the text (and other inline) content inside the element to which it is applied.
There is no content inside an image.
You can either:
Make the image display as a block and then use auto margins
Put it inside any block element (it doesn't have to be a div, but that's usually the most sensible choice if you are just centring it) and set text-align on that container.
text-align: center centers horizontally inline content of the container it is applied to. So yes, to center image (inline layout) inside container (block layout), you should apply this css to container, not image.
If you want to center an img use:
img {
display: block;
margin 0 auto;
}
Instead of using the text-align on img tag, use it on div
p, span, div,img {
text-align: center;
}
#testimg {
width:100%;
position:absolute;
overflow:auto;
top:50px;
height: 100%;
}
<div id="testimg">
<img src="https://www.google.com/images/nav_logo195.png" />
</div>
I am looking to take three divs and stack them horizontally (right next to each other) in a containing div. This containing div has a fluid width so that when the browser is scaled in (this is for a responsive design) the three child divs scale proportionally. In addition the three child divs have to be positioned individually so that the left-most div is on the left, the middle div is centered, and the right-most div is all the way to the right side of containing div.
I've tried to accomplish this by setting the container div to display: table and the three child divs to display: table-cell -- this works great except for I can't get the three child divs to be positioned in the way in which I described above. I tried border-spacing on the parent div; however, this doesn't work well with my goal.
Here's my Fiddle with code: http://jsfiddle.net/mkerny45/97mt7/7/
Screenshot of desired result: http://d.pr/i/KUfd
(Here you will see three child divs: left, middle, right in a containing div. The left and right divs are all the way to the left/right side respectively and center div is in center of containing div. The margin is is also depicted in the photo. I would like for the entire containing div and child divs to scale down proportionally and have the child divs always stay positioned in their appropriate location.)
Code
<div class="articles">
<article>
<img src="http://placehold.it/380x214/000000&text=Left" />
</article>
<article>
<img src="http://placehold.it/380x214/3D6AA2&text=Middle" />
</article>
<article>
<img src="http://placehold.it/380x214/98BD56&text=Right" />
</article>
</div>
You can achieve this using text-align:justify to space the div's evenly so they are flush to the edges. Then you add a span class with a width of 100% to force the width of the wrapper.
DEMO -> http://jsfiddle.net/spUKQ/2/
HTML
<div id="container">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<span class="stretch"></span>
</div>
CSS
#container {
border: 2px dashed #444;
height: 125px;
text-align: justify;
-ms-text-justify: distribute-all-lines;
text-justify: distribute-all-lines;
/* just for demo */
min-width: 612px;
}
.box1, .box2, .box3 {
width: 150px;
height: 125px;
vertical-align: top;
display: inline-block;
*display: inline;
zoom: 1
}
.stretch {
width: 100%;
display: inline-block;
font-size: 0;
line-height: 0
}
/* just for demo */
.box1, .box3 {
background: #ccc
}
.box2 {
background: #0ff
}
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.
I have a page in which a header consists of three divs - one that's floated to the left, one that's floated to the right, and one that's in between them. I'd like for that central div to be centered, yet sadly float: center doesn't exist and I can't just float it to the left and add padding as it'd have to change depending on the window size.
Is there something simple I'm overlooking? Or how would I do such a thing?
Update:
In addition, I'd like to find a way of centering that middle div in the space between the divs in case that looks better.
If you have two floated divs, then you know the margins. The problem is that the float:right div should be put before the middle div. So basically you will have:
left-floated | right-floated | centered
Now, about the margins: usually you can just use margin:0 auto, right? The problem is that right now you know the values of the margins: floated divs! So you just need to use:
margin:0 right-floated-width 0 left-floated-width
That should work.
Years later edit
Meanwhile, a new toy is in town: flexbox. The support is fairly good (i.e. if you don't need to support lower than IE 10) and the ease of use is way over floats.
You can see a very good flexbox guide here. The example you need is right here.
Indeed, the important part is that the centered div come after the left and right divs in the markup. Check out this example, it uses margin-left: auto and margin-right: auto on the centered div, which causes it to be centered.
<html>
<head>
<style type="text/css">
#left
{
float: left;
border: solid 1px red;
}
#mid
{
margin-left: auto;
margin-right: auto;
border: solid 1px red;
}
#right
{
float: right;
border: solid 1px red;
}
</style>
</head>
<body>
<div id="left">
left
</div>
<div id="right">
right
</div>
<div id="mid">
mid
</div>
</body>
</html>
Here's a JS Bin to test: http://jsbin.com/agewes/1/edit
Usually you can use flexbox instead of floats:
https://jsfiddle.net/h0zaf4Lp/
HTML:
<div class="container">
<div>left</div>
<div class="center">center</div>
<div>right</div>
</div>
CSS:
.container {
display: flex;
}
.center {
flex-grow: 1;
}
The element with the centered content needs to be specified after both floated elements. After that, simply set the middle element to text-align: center. The text in the centered element will squeeze in between the floats.
See here:
http://jsfiddle.net/calvintennant/wjjeR/
Try this (make sure to use better class names):
.left {
float:left;
width:200px;
}
.right{
float:right;
width:200px;
}
.center {
overflow:hidden;
zoom:1;
}
The center div will fit between the two floats.
If you want to create a gutter between that centered div and the two floats, then use margin on the floats, not on the center div.
Because of "zoom", the CSS will not validate, but that layout will work in IE 5.5 and 6.
Note that source order is important here: the two floats must come first, then your "centered" div.
In some cases, you have a limitation and cannot change the page markup by moving the middle div after the right-floated div. In that case, follow these instructions:
For container: position: relative
For middle div: position: absolute; left: [containerWidth - middle-width / 2]
I hope you got the idea.
A simple solution without having to change the order of the divs (sometimes we can not do this) could be an absolute positioning for the center div as follows:
.container {
position: relative;
}
.container div {
width: 200px;
background: red;
}
.left {
float: left;
}
.right {
float: right;
}
.center {
position: absolute;
top: 0;
left: 0;
right: 0;
margin: auto;
}
<div class="container">
<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>
</div>
https://jsfiddle.net/Helioz/nj548y0g/