I know it's quite annoying, seems that vertical-align in CSS is common pitfall but I really need your help.
I want the text to be always be in "middle" vertical position left to the image (image test.gif has different dimensions)
I have such structure of html elements (unfortunately I can't change it due to system restrictions)
<div class="wrapper">
<div class="logo">
<img alt="some text" src="http://localhost/test.gif">
</div>
<div class="source">some text</div>
</div>
CSS:
.wrapper {clear: both;}
.logo {float: left;}
.source { float: left;line-height: 16px;}
Spent 1.5 hours and no luck. Tried to apply vertical align to different elements with different positioning, etc...Please help!
If you don't need to support IE7, try this:
.wrapper { display: table; }
.logo { display: table-cell; }
.source { display: table-cell; vertical-align: middle; }
Basically, tables give you the option to vertically align to the middle, and by making your divs act like a table, we can mimic that option.
A common issue but is explained well here: http://phrogz.net/css/vertical-align/
Key Points
Specify the parent container as position:relative or position:absolute
Specify a fixed height on the child container.
Set position:absolute and top:50% on the child container to move the top down to the middle of the parent.
Set margin-top:-yy where yy is half the height of the child container to offset the item up.
<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>
Related
I have two divs next to each other that are displayed using inline-block. As the viewport shrinks, I'd like the text in the leftmost div to wrap before the divs collapse vertically, but I can't seem to make that happen. JSFiddle here.
In the demo, when the viewport shrinks "Should stay in block" is pushed below the title block, whereas I'd like the "Lots of text I want to wrap" to start wrapping to keep the two blocks on the same line.
Use display: table-cell; Instead of display:inline-block will solve your issue.
.title {
display: table-cell;
vertical-align: top;
}
.box {
display: table-cell;
vertical-align: top;
}
<div class="title">
<h1>Hi</h1>
<h2>Lots of text I want to wrap</h2>
</div>
<div class="box">
Should stay in a block
</div>
Check your updated Fiddle Here.
Can't you make them to fill the body or the container giving them a 50% width?
JSfiddle
EDIT: JSfiddle with a wrapper
.title {
display: inline-block;
vertical-align: top;
background-color:red;
width:50%;
}
.box {
display: inline-block;
vertical-align: top;
background-color:blue;
width:50%;
}
<div class="title">
<h1>Hi</h1>
<h2>Lots of text I want to wrap</h2>
</div><div class="box">
Should stay in a block
</div>
Edit: remember to not wrap after the first div, and make sure that there are not spaces </div><div class="box"> so you can use 50% preserving the inline-block
If I am having two divs in a parent div and and all three divs have float left. What I have to do is to align center the two child divs without removing float left.
Use display: inline-block instead of float: left on child divs and you can give text-align: center to the parent div.
Let me see if i have understood,so you have something like this:
<div id="parent" style="float:left;">
<div id="child1" style="float:left;"></div>
<div id="child2" style="float:left;"></div>
</div>
And if im right you want the two div childs to be aligned in the center of the parent div but without removing the left float of none of them.Then i think this might work:
<div id="parent" style="float:left;position:absolute;">
<div id="child1" style="float:left; position:relative; left: 100px"></div>
<div id="child2" style="float:left; position:relative; left: 100px"></div>
</div>
So in the div style,try to center it by assigning a value in percentage or pixels to left:
It should work.I also advice you to use percentage,but first use pixels to understand how it works.And another advice is to not use css in html tags,i just showed you what to do,but it's recommended to have another file (style.css) to include in your html file.
This layout may help you:
HTML
<div class="div-p">
<div class="div-1"></div>
<div class="div-2"></div>
</div>
CSS - DEMO
.div-p{background-color:#eee;width:640px;height:400px;float:left;}
.div-1{background-color:#f00;width:300px;height:300px;float:left;margin:10px;}
.div-2{background-color:#0f0;width:300px;height:300px;float:left;margin:10px;}
If you want to center the parent div then use margin:0 auto; and remove the float:left;
CSS - DEMO
.div-p{background-color:#eee;width:640px;height:400px;margin:0 auto;}
.div-1{background-color:#f00;width:300px;height:300px;float:left;margin:10px;}
.div-2{background-color:#0f0;width:300px;height:300px;float:left;margin:10px;}
#parent{width:100%;}
#child1,#child2{width:90%;margin:0px 5%;}
set your child width in percentage with margin.
it will align both child div in center
you need set these styles for 2 child divs :
{ width:50%; text-align:center; float:left; height:50px;}
and the parent div :
{ width:100%; margin: 0 auto; float:left; height:50px;}
Note: height style is optional.
I'm at a complete loss here. I've tried everything. Different displays, positions, floats... Nothing seems to work:
Markup:
<div id="today-leads" class="total-wrap">
<h2>Leads</h2>
<div id="leads-wrap">
<div id="leads-total" class="total">224</div>
<div id="leads-ticker-wrap"> <i class="icon-caret-up"></i>
<div id="leads-percentage-change" class="higher">56%</div>
</div>
</div>
CSS:
h2 {
text-align:center;
}
#leads-wrap{
display:inline-block;
margin: 0 auto;
}
#leads-ticker-wrap{
float:left;
}
#leads-total{
float:left;
}
Here's the jsfiddle
Which div?
leads-wrap won't centre because it is an inline-block not a block, so it is influenced by the text-align property of its containing block.
leads-ticker-wrap and leads-total won't centre because (a) they are floating left and (b) you haven't set auto margins on them.
Auto left/right margins only work when the element in question has a known width. So add something like
#leads-wrap
{
width: 65%;
}
Obviously you adjust the actual width to whatever you need.
I want to position a paragraph to the right of an <iframe> of a Google map.
I do not know how to show my code, so here is a screenshot of what I want:
Just use the float style. Put your google map iframe in a div class, and the paragraph in another div class, then apply the following CSS styles to those div classes(don't forget to clear the blocks after float effect, to not make the blocks trouble below them):
css
.google_map{
width:55%;
margin-right:2%;
float: left;
}
.google_map iframe{
width:100%;
}
.paragraph {
width:42%;
float: left;
}
.clearfix{
clear:both
}
html
<div class="google_map">
<iframe></iframe>
</div>
<div class="paragraph">
<p></p>
</div>
<div class="clearfix"></div>
You have two options, either float:left or display:inline-block.
Both methods have their caveats. It seems that display:inline-block is more common nowadays, as it avoids some of the issues of floating.
Read this article http://designshack.net/articles/css/whats-the-deal-with-display-inline-block/ or this one http://www.vanseodesign.com/css/inline-blocks/ for a more in detail discussion.
You can simply use a div to make a container and display: flex; to make the content appear side-by-side like this:
.splitscreen {
display: flex;
}
.splitscreen .left,
.splitscreen .right {
flex: 1;
}
<div class="splitscreen">
<div class="left">
Content
</div>
<div class="right">
Content
</div>
</div>
None of these solutions seem to work if you increase the amount of text so it is larger than the width of the parent container, the element to the right still gets moved below the one to the left instead of remaining next to it. To fix this, you can apply this style to the left element:
position: absolute;
width: 50px;
And apply this style to the right element:
margin-left: 50px;
Just make sure that the margin-left for the right element is greater than or equal to the width of the left element. No floating or other attributes are necessary. I would suggest wrapping these elements in a div with the style:
display: inline-block;
Applying this style may not be necessary depending on surrounding elements
Fiddle:
http://jsfiddle.net/2b0bqqse/
You can see the text to the right is taller than the element to the left outlined in black. If you remove the absolute positioning and margin and instead use float as others have suggested, the text to the right will drop down below the element to the left
Fiddle:
http://jsfiddle.net/qrx78u20/
For your iframe give an outer div with style display:inline-block, And for your paragraph div also give display:inline-block
HTML
<div class="side">
<iframe></iframe>
</div>
<div class="side">
<p></p>
</div>
CSS
.side {
display:inline-block;
}
Use either float or inline elements:
Example JSBIN
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div>float example</div>
<div><div style="float:left">Floating left content</div><div>Some content</div></div>
<div>inline block example</div>
<div><div style="display:inline-block">Some content</div><div style="display:inline-block">Next content</div></div>
</body>
</html>
Like this
.block {
display: inline-block;
vertical-align:top;
}
JSFiddle Demo
You can use float:left to align div in one line.
Fiddle
You can float the elements (the map wrapper, and the paragraph),
or use inline-block on both of them.
Wrap the iframe in a class, float that left.
The paragraph with then be forced up and to the right as long as there is room for it.
Then set your paragraph to display:inline-block, and add some left margin to tidy it up.
<div class="left">
<img src="http://lorempixel.com/300/300" /> <!--placeholder for iframe-->
</div>
<p>Lorem Paragraph Text</p>
.left { float: left; }
p { display: inline-block; margin-left: 30px; }
Here's a fiddle: http://jsfiddle.net/4DACH/
Put the iframe inside the <p> and make the iframe CSS
float:left;
display:inline-block;
give your boxes the class foo (or whatever) and add the css
.foo{
float: left;
}
Alright so I have
<div id='1'></div>
<div id='2'></div>
<div id='3'></div>
Only one word will go into each div. I want the width of each div to be auto
and I want to word from #2 to be in the middle of the screen using text-align: center; with the word in #1 being displayed directly to the left of #2 and the #3 directly to the right of #2.
I have been trying different css for a while, but to no effect.
Hoping someone has a simple answer.
Simply float all the divs to the left. They will display in order.
<style>
.my-dvis {
float:left;
width:33.33%;
margin:0;
padding:0;
border:none;
}
</style>
<div class="my-divs"></div>
<div class="my-divs"></div>
<div class="my-divs"></div>
text-align: center only applies to inline elements.
jsfiddle
HTML
<div class="left">1</div>
<div class="middle">2</div>
<div class="right">3</div>
CSS
body { text-align: center; }
div { display: inline-block; }
Have you tried floating id=1 to the left and floating id=3 to the right?
I suggest you to use <span> tag instead of using div tag,because div have a property of taking width 100%.
Or else if you want to use div tag then use in the following manor
<div id='1'></div>
<div id='2'></div>
<div id='3'></div>
<style>
div{
float:left;
width:33.3%;
}
</style>