I saw a similar post to this which is here but I noticed that no one answered and that when I do press the jsfiddle, it doesn't center it.
I have this current code and what I'm trying to accomplish is to have the image directly in the middle vertically inside the div. I've tried vertical-align and putting it in span and top % but nothing seems to work. I'm also using Chrome so I don't know if that matters.
http://jsfiddle.net/y84mx/
<div class="hours">
<div id="sun">
<img src="http://jsfiddle.net/img/logo.png" alt="Opening" height="auto" width="20%" align="left" vertical-align="middle" />
<span>Hours</span>
</div>
</div>
Thanks!
You can use:
#sun {
position:relative;
}
img {
background: #3A6F9A;
position:absolute;
top:0;
bottom:0;
left:0;
margin:auto;
}
Updated Fiddle
For both items set display: inline-block;
Then make sure to match the line-height of the <span> the height of the image.
Demo
HTML
<div id="hours">
<span id="sun">
<img src="http://jsfiddle.net/img/logo.png" alt="twibuffer" />
</span>
<span> Hours</span>
</div>
CSS
#hours {
margin-bottom:2%;
text-align: center;
}
#hours span {
display: inline-block;
vertical-align: middle;
}
#hours #sun {
border: 1px solid red;
/* to show the centering */
}
I have updated the fiddle, Please check
#sun{
line-height : auto;
border: 1px solid;
text-align : center;
}
.hours{
padding-left: 2%;
padding-right: 2%;
text-align: right;
color: #000;
font-size: 40px;
}
img {
background: #3A6F9A;
}
Check out this
http://jsfiddle.net/chetangawai/y84mx/9/
#sun{
text-align:center;
display:inline-block;
border:solid
}
.hours{
color: #000;
font-size: 40px;
padding-left: 2%;
padding-right: 2%;
}
img {
background: #3A6F9A;
}
Related
I have two DIVs, one is left floated with bigger font size and the other one is right floated with smaller fonts. I want to align the smaller fonted DIV to the bottom aligned with the bigger sized text. Not able to achieve it.
and the css
.floatLeft {
float: left;
}
.floatRight {
float: right;
}
.font12 {
font-size: 12px;
}
<div class="floatLeft">Activity</div>
<div class="floatRight font12 ">View timeline / Filter activities</div>
Answer changed to allow for float as per your request.
Please see FIDDLE.
HTML
<div class="big">Activity</div>
<div class="small">
<a href="javascript:void(0);">View timeline / Filter activities
</a>
</div>
CSS
.big {
float: left;
font-size: 2em
}
.small {
float: right;
position: relative;
font-size: 1em;
top: 13px;
}
Demo page
CSS needed:
.big {
display:inline-block;
vertical-align:bottom;
/* just for demo: */
font-size: 2em;
height:200px;
background:#FADDFF;
}
.small {
display:inline-block;
vertical-align:bottom;
/* just for demo: */
font-size: 1em;
background:#D2E9F7;
height:120px;
}
so making the two elements inline-block displayed, and vertical-align with value of bottom, they will be on the same level, and they're line of reference will be the bottom of them both
Additional to the above response, you can use display: table-cell to fit both div's to the same height:
.floatLeft {
border: 1px solid black;
font-size: 30px;
width: 200px;
display: table-cell;
vertical-align: text-bottom;
}
.floatRight {
border: 1px solid black;
font-size: 12px;
display: table-cell;
vertical-align: text-bottom;
width: 200px;
}
<div class="floatLeft">Activity</div>
<div class="floatRight font12 ">View timeline / Filter activities</div>
Here is the jsfiddle: https://jsfiddle.net/x3m72kqh/
JSFiddle: Solution in JSFiddle
Here is a solution with inline-block :
.big {
display:inline-block;
width: 50%;
float: left;
font-size: 2em
}
.small {
display:inline-block;
width: 50%;
font-size: 1em
}
a {
float:right;
}
Im trying to have a button with format like I have in my image 1.
Where I have a div with background red at left, and inside this div I have an image, and I want this image aligned at center of my div.
And then I have the text of my button at right of my red div.
Image 1:
But What Im having is this:
Image 2
I dont have my image at center of my red div, and my button text is stucked in my div.
Do you see what Im doing wrong?
This is my fiddle with issue Im having: http://jsfiddle.net/nXuU2/2/
This is my html
<button class="btn">
<div id="btn_container"><img src="http://placehold.it/30x30" width="30" height="30"/></div>
<span>Button link 1</span>
</button>
And my CSS:
.btn
{
position: relative;
width: 200px;
height: 60px;
margin-bottom:20px;
padding: 0 10px;
text-align: left;
font-size: 16px;
color: #333;
background:gray;
}
#btn_container
{
width:40px;
height:40px;
border-radius:5px;
background:red;
float:left;
}
.btn img
{
margin-right: 10px;
vertical-align:middle;
}
.btn span
{
display:inline-block;
width: 120px;
vertical-align:middle;
}
Just playing with CSS positioning here, make your div with the red background position: relative; and use absolute for your img tag
Demo
.btn img {
left: 50%;
margin-left: -15px; /* 1/2 of total width of your img */
top: 50%;
margin-top: -15px; /* 1/2 of total height of your img */
position: absolute;
}
Demo 2 (Alternate way to do this, you won't need CSS positioning)
In the Demo 2, you won't need CSS positioning, just remove margin-right from .btn img and use text-align: center; on #btn_container, and lastly, apply margin-top to .btn img
I don't think that you will need a wrapping element for background-color, just apply to img tag, so if you don't want to use your wrapping element than refer the solution below ..
CSS
.btn img {
display: inline-block;
vertical-align: middle;
background: #f00;
padding: 5px;
border-radius: 5px;
}
HTML
<button class="btn">
<img src="http://placehold.it/30x30" width="30" height="30"/>
<span>Button link 1</span>
</button>
Demo 3
Try out the below HTML and CSS code:
HTML Code:
<button class="btn">
<div id="btn_container">
<img src="http://placehold.it/30x30" width="30" height="30"/>
<span class="btn-txt">Button link 1</span>
</div>
</button>
CSS Code:
.btn {
background: #fff;
border:3px solid grey;
padding: 5px;
width: 200px;
text-align:left;
}
#btn_container img {
border: 6px solid red;
margin-right: 5px;
vertical-align: middle;
}
.btn-txt {
vertical-align: middle;
}
Check out the DEMO on JSFiddle
You can fix by updating your margins for your img and span
.btn img
{
margin-left: 5px;
margin-top: 5px;
}
.btn span
{
display:inline-block;
width: 120px;
margin-top: 10px;
margin-left: 10px;
}
In addition to the answer above, you can add line-height to match the height of your container to force the button text into a centered position. Also, I used text-indent to push the text away from the image.
.btn span { line-height: 60px; text-indent: 10px;}
.btn img { margin: 5px; }
#btn_container { margin: 10px 0 0 0; }
Fiddle
I am trying to do a vertical align for my texts. I also want to make sure the green background div need to cover from top to bottom inside the red color div. Currently the green color div only covers 90% of the red oolor div. I am not sure what happened in my case. Can anyone explain and help me out?
html
<div id='wrapper'>
<div class='head'></div>
<h2 class='title'>Warm-Up</h2>
</div>
css
.title{
display: inline;
padding-left: 15px;
vertical-align: middle;
margin: 0;
}
.head{
width: 30px;
height: 50px;
display: inline-block;
background-color: #A9D075;
}
#wrapper{
width:200px;
background-color: red;
}
http://jsfiddle.net/rmS2f/3/
Thanks.
Demo http://jsfiddle.net/rmS2f/6/
Your html structure will work but you need to change the styles:
.title {
display: inline-block;
padding-left: 45px;
vertical-align: middle;
margin: 0;
line-height:50px;
}
.head {
position:absolute;
left:0;
width: 30px;
height: 100%;
display: inline-block;
background-color: #A9D075;
}
#wrapper {
position:relative;
width:200px;
height:50px;
background-color: red;
}
I'd like to fill all the fluid with white colored square.
As you see the picture, each fluid is filled with white, but it's not complete square.
I wrapped whole with div class WhiteZone, but it won't make them square.
How can I make it square?
LIVE DEMO
HTML
<div class="WhiteZone">
<div class="Box">
<div class="Left">
abcdefg<br />
opqrstu
</div>
</div>
<div class="Box">
<div class="Right">
hijklmn
</div>
</div>
</div>
CSS
div.WhiteZone{
color: #000;
background-color: #fff;
}
div.Box{
padding: 0px;
text-align: center;
float: left;
}
div.Left{
width: 300px;
padding-top: 5px;
padding-bottom: 15px;
text-align: center;
color: #000;
background-color: #fff;
clear: both;
}
div.Right{
width: 300px;
padding-top: 5px;
text-align: left;
color: #000;
background-color: #fff;
clear: both;
}
You can use display: table for this. Write like this:
div.WhiteZone {
color: #000;
background-color: #fff;
display: table;
}
div.Box {
padding: 0px;
text-align: center;
display: table-cell;
}
Check this demo.
div.WhiteZone{
color:#000000;
background-color:#ffffff;
overflow:hidden;
}
You can add overflow:hidden to your whitezone class so it will stretch to fit the height of inner floating divs. But with only that added you will get white background taking full width of your page. Like here
To avoid that, you can also add float:left to your whitezone class (like here) or set a width to it (like here)
I've spent a few hours with this, and I think it's much simpler to do this.. I'm trying to center 3 divs horizontally whilst keeping them fully linkable, and I finally gave up on that and tried tables ( :-o )
The first one shows my failed attempt at linking a div.
<center><table>
<tr>
<td>
<a href="http://google.com" style="display:block;height:100%;width:100%">
<div>
a
</div>
</a>
</td>
<td>b</td>
<td>c</td>
</tr>
</table>
With CSS
tbody tr td{
width: 300px;
height: 200px;
border: 2px solid #000;
background-color: #000;
opacity: 0.7;
color: #fff;
font-size: 30px;
font-family: 'calibri'; //temporary
padding: 30px;
}
body center table
{
border-spacing: 20px;
margin-top: -90px;
}
tr td a{
height:150%;
width:150%;
}
If anyone knows how to do this with divs or tables, your responses are greatly appreciated!
No need to use tables at all. The key here is display: inline-block;. See it in action here: little link. HTML:
<div class = "onediv">Glee is awesome!</div>
<div class = "onediv">Glee is awesome!</div>
<div class = "onediv">Glee is awesome!</div>
CSS:
body { /*this should be whatever is containing your three divs*/
text-align: center; /*center them*/
white-space: nowrap; /*make sure they're all on the same line*/
}
.onediv {
display: inline-block; /*magic*/
height: 200px; /*or whatever you want*/
width: 150px;
/*make it look pretty*/
background: rgb(0, 162, 232);
color: white;
}
a {
color: white;
height: 100%; /*spans the whole div vertically*/
width: 100%; /*and horizontally (not necessary, but can't hurt!)*/
display: block; /*otherwise the height and width definitions won't work*/
}
Do you mean something like this?
Demo
HTML:
<div id="wrapper">
<div>a</div>
<div>b</div>
<div>c</div>
</div>
CSS:
#wrapper, #wrapper * {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
#wrapper {
margin:0 auto;
width:1020px; /* width of divs + margin */
}
#wrapper > div {
float:left;
width:300px;
height: 200px;
text-align:center;
margin:20px;
border: 2px solid #000;
line-height:140px; /* optional, will center the text vertically */
background-color: #000;
opacity: 0.7;
font-size: 30px;
font-family: 'calibri';
padding: 30px;
}
#wrapper > div a {
display:block;
color: #fff;
}
Edit: updated with your styling
<td>
<a href="http://google.com" style="display:block;height:100%;width:100%">
<div>
a
</div>
</a>
</td>
You make all tds div lining.