How do I format my CSS so that the text inside "header-right" should be aligned at the bottom while my image at "header-left" is aligned at the top?
Here's my html:
<div class="container">
<div class="header-left;">
<img src="img1.png">
</div>
<div class="header-right;">
<div style="float:left;">
This text should be at the bottom.
</div>
<div style="float:left;">
This text should be at the bottom also.
</div>
</div>
</div>
Thanks.:)
From your class-naming I suppose you want both texts to the right of the image, bottom-aligned with the image?
To achieve this, apply display: inline-block to all DIVs , in addition apply display: block; to the image to avoid any space at its bottom:
.header-left,
.header-right,
.header-right div {
display: inline-block;
}
.header-left img {
display: block;
}
<div class="container">
<div class="header-left">
<img src="http://placehold.it/80x120">
</div>
<div class="header-right">
<div>
This text should be at the bottom.
</div>
<div>
This text should be at the bottom also.
</div>
</div>
</div>
BTW: Don't use a semicolon in class="header-right" (inside your DIV-tags) and similar.
You can displat the .container as a table and the .header-right and .header-left as table cells. This way, you can align the contents vertical bottom (or even top or middle)
See snippet below
.container{
display:table;
}
.header-left,.header-right{
display:table-cell;
}
.header-right{
vertical-align:bottom;
}
.header-right *{
display:table-cell;
}
<div class="container">
<div class="header-left">
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSYTogPdYlS2zHfImUPfjdkO1v0793TjQMD2qjLoY7qNkqCUN_-dA">
</div>
<div class="header-right">
<div style="">
This text should be at the bottom.
</div>
<div style="">
This text should be at the bottom also.
</div>
</div>
</div>
Related
I have this code
<div>
<div style="float:left">
<h2>header</h2>
</div>
<span style="float:right; vertical-align: bottom">
text2
</span>
<div class="clear:both"></div>
</div>
I am not able to vertically align the text2 to the bottom of the parent div.
How to do it?
That's rather strange HTML code, but here's a solution that doesn't change the HTML:
(P.S.: You asked that the span should align with the bottom of the parent DIV, not wth the h1. If you want the latter, you have to give them both the same margin-bottom and padding-bottom.)
div:first-of-type {
position: relative;
overflow: hidden;
}
span {
display: block;
position: absolute;
right: 0;
bottom: 0;
}
<div>
<div style="float:left">
<h2>header</h2>
</div>
<span style="float:right; vertical-align: bottom">
text2
</span>
<div class="clear:both"></div>
</div>
Probably you will have to consider changing the elements you are using since h2 and span dont have the same default user agent style. h2 will appear bolder/ bigger than span and span appear lighter. That is why you see it not to be aligned
try this
`<div style="float:left">
<h2>header</h2>
</div>
<div style="float:right; vertical-align: bottom">
<h2> text2</h2>
</div>
<div class="clear:both"></div>`
See my code at codepen
I'm trying to horizontally center the circle progress bar in the page, I tried setting margin: 0 auto; on the div, it didn't work. I, also, tried setting text-align: center on the parent div and setting the div to display: inline-block, no success as well.
This is the element in the HTML I'm trying to center:
<div class="row">
<div class="clearfix">
<div class="col-md-12">
<div class="timer"> <!-- this one should be centered -->
<div class="c100 p50 big">
<span>50%</span>
<div class="slice">
<div class="bar"></div>
<div class="fill"></div>
</div>
</div>
</div>
</div>
</div>
</div>
And this is the CSS I'm applying on the element:
.col-md-12{
width: 100%;
}
.timer{
width: 100%;
margin: 0 auto;
}
Remove float: left; or set it to none in .c100 css class.
.c100 {
float:none;
}
I think it should be like this.
<center>
<div class="row">
<div class="clearfix">
<div class="col-md-12">
<div class="timer"> <!-- this one should be centered -->
<div class="c100 p50 big">
<span>50%</span>
<div class="slice">
<div class="bar"></div>
<div class="fill"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</center>
Replace your existing CSS rules with:
.col-md-12 {
text-align: center;
}
.timer {
display: inline-block;
}
<div class="timer"> <!-- this one should be centered -->
.timer{
width: 100%;
margin: 0 auto;
}
It is centered. It is also 100% wide, so being in the center is the same as being left or right aligned. It takes up all the space.
You need to set a smaller width in order for it to noticeably appear in the center.
Remove float: left;from .c100 class to center the div.
If that's what you wanted:
CodePen example
I added:
.timer {display: flex}
and also added a new class to it's only child
.align {margin: 0 auto !important;}
as .c100 overrides margins.
I would like to align some icons and some text in a nice grid like fashion.
The text needs to be centerd under the second icon.
It would have to look like this.
____ ____ ____
| | | | | |
|ICON| |ICON| |ICON|
|____| |____| |____|
TEXT
Is there any easy way to achieve this?
create a row div and give it 100% width and float left and inside this div create 3 div as a col div and give each 33% and float left and place your icon inside these div..now create another row width 100% float left now place p tag inside it and style this p tag text-align:center now you will see your text always below 2nd icon img....
<div style="width:100%;float:left;">
<div style="width:33%;float:left;">
<img src="your source" />
</div>
<div style="width:33%;float:left;">
<img src="your source" />
</div>
<div style="width:33%;float:left;">
<img src="your source" />
</div>
</div>
<div style="width:100%;float:left;">
<p style="text-align:center;"> You Text Here..</p>
</div>
Create a class that controls the size of each of the areas that hold your icons. As a sample i just used px but if you want it responsive then i would suggest that you use %. With a holder for each icon you can easily add text below, this will then stay nicely aligned.
Sample code snippet:
.pull-left {
float: left;
}
.icon-box {
width: 100px;
text-align: center;
}
.icon {
width: 60px;
height: 60px;
border: 1px solid;
margin: 0 auto;
display: block;
}
<div class="icon-box pull-left">
<div class="icon">ICON</div>
</div>
<div class="icon-box pull-left">
<div class="icon">ICON</div>
<p>Text</p>
</div>
<div class="icon-box pull-left">
<div class="icon">ICON</div>
</div>
you can do it quite easily. You need to use list item & display inline with text center property. Like below code -
HTML portion
<div id="test1">
<ul>
<li>
<img src="" alt="num1">
</li>
<li>
<img src="" alt="num2">
<br/>
121
</li>
<li><img src="" alt="num3"></li>
</ul>
</div>
CSS for it
#test1 ul li {
display: inline;
list-style: none;
float: left;
padding: 0;
text-align:center;
}
Have you heard from bootstrap 3 ? It has a lot of features that help you with responsive alignment.
An example of this would be :
<div class="row">
<div class="col-md-4 text-center">
<img src="my-picture.jpg" class="img-responsive" />
</div>
<div class="col-md-4 text-center">
<img src="my-picture.jpg" class="img-responsive" />
</div>
<div class="col-md-4 text-center">
<img src="my-picture.jpg" class="img-responsive" />
</div>
</div>
One way I could think of is to create 3 container (for example 3 divs) with a css property on width (let say 33% width each, or something smaller if you need to add margin (you could even use px not %, but I recommand % for responsivness) with a float left property. Those divs will contain the icons, then you create another 3 icons with the same propreties that will display under the icons. Now you just have to put the text in the center one with text align center and that's it. You gave us few informations so I can't help you better than this.
Here you have an example of what I meant, you just need to implement it by your needs.
html:
<div class="container">
<div class="icon"></div>
<div class="icon"></div>
<div class="icon"></div>
<div class="text_empty"></div>
<div class="text"></div>
<div class="text_empty"></div>
css:
.container {width: 100%;}
.icon {width:33%; float: left; }
.text_empty {width:33%; float: left; }
.text {width:33%; float: left; text-align:center; }
I have the following code:
html
<div class="container">
<div class="float-left">
<img width="550" src="image.jpg" alt="" />
</div>
<div class="float-left">
<h1 class="new">Some long text here that should word wrap</h1>
</div>
<div class="clear"></div>
<div>
css
.container{
width:960px;
}
.float-left {
float:left
}
.clear{
clear:both;
}
h1.new{
font-family: RockwellMT-Light;
font-size: 28px;
line-height: 31px;
}
I want the divs to act like 2 columns One will be the image and the second one should be text that can go down as much as it takes.
Since float left does not have a fixed width the problem is that the whole element h1 is jumping on the new line and the text does not goes on the next line.
I don't want to give fixed widths to the floating divs.
How can I prevent this?
You could remove class="float-left" from the second <div> and it would work.
you can try smth like this:
<div class="container">
<div class="something">something</div>
<div class="nextthing float-left">
<h1 class="new">Some long text here that should word wrap</h1>
</div>
<div class="clear"></div>
<div>
.container {
position: relative;
}
.something {
position: absolute;
}
.nextthing {
text-indent: size_of_.something;
}
Or change float:left, to display:inline-block;
I have a question regarding centering row vertically!
I have here a simple html, with use of bootstrap 3:
<div class="container">
<div class="row">
<div class="col-sm-12 text-center" style="padding:5 20 5 20;">
Some text text text text text .....
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="thumbnail">
<img data-src="holder.js/460x308">
</div>
</div>
</div>
</div>
I would like to center this container or row ... doesn't matter.
So imagine i have a window which is 500px x 500px
I would like to pisition it in the middle of it, not on top (what is now the case) or bottom, but in center
PS: http://jsfiddle.net/e89TE/
try this css:
.container{
display:table;
}
.row{
display: table-cell;
vertical-align: middle;
}
should work. ps. post a fiddle next time
First thing you will need to do if you want the type on TOP of the image is make the image a background image:
<div class="col-sm-12 text-center">
<div class="foo">
Some text text text text text …..
</div>
</div>
The css
.foo {
background-image:url("holder.js/460x308");
}