Menu
How do I make the text that is INSIDE this styled element align to the bottom left corner? I only want the text inside the box to be in the bottom left corner of the box. The rest of the text should be unaffected.
I am new to CSS and cannot figure it out.
HTML
<body>
<h1>example text</h1>
<article class="box" style="background-color: #2672EC">foo bar</article>
<h1>example text</h1>
</body>
CSS
body {
font-family: Verdana;
font-size: 16px;
color: black;
}
.box {
height: 187px;
width: 187px;
margin-right: 5.5px;
margin-left: 5.5px;
margin-bottom: 5.5px;
margin-top: 5.5px;
color: white;
}
Here is the JSFiddle
http://jsfiddle.net/J9hT5/8/
949
For that you would just add it at the bottom of the HTML code.
You can also use css properties like: vertical-align:bottom; and float:right; .
You can do it two ways, either by using CSS Positioning Technique where you need to set the parent element to position: relative; and the child element to position: absolute;
Demo (Wrapping the text using a span element)
.box > span {
position: absolute;
bottom: 0;
left: 0;
}
Or by using display: table-cell; with vertical-align: bottom;
Demo (No change in the markup)
.box {
height: 187px;
width: 187px;
margin-right: 5.5px;
margin-left: 5.5px;
margin-bottom: 5.5px;
margin-top: 5.5px;
color: white;
display: table-cell;
vertical-align: bottom;
}
Also, would like to refactor your CSS a bit, the below snippet
margin-right: 5.5px;
margin-left: 5.5px;
margin-bottom: 5.5px;
margin-top: 5.5px;
Can be wrote as margin: 5.5px 5.5px 5.5px 5.5px;
111
Try to wrap your targeted text inside a span:
<article class="box" style="background-color: #2672EC"><span class="bottom">foo bar</span>
Then you can use:
.box {
position: relative;
}
.bottom {
position: absolute;
bottom: 0;
left: 0;
}
Updated Fiddle
27
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
