I'm trying to center vertically a floated div, here is the JSFiddle
.wrapper{
width:250px;
background-color:red;
}
#SmileImg{
height:100px;
width:auto;
}
.textwrapper{
float:right;
}
<div class="wrapper">
<img src="http://img.xcitefun.net/users/2010/02/147370,xcitefun-smile-4.png" id="SmileImg" />
<div class="textwrapper">
<p>Please Smile!</p>
</div>
</div>
I do not know how to put the text "Please Smile" vertically centered.
Hope someone will help me. Please be patient I am not an expert!
Thank you in advance!
Floating elements cannot be vertically aligned, you should either use inline blocks, or set line height equal to image height for your text. One more way is to use "display: table-cell"
example with inline blocks:
.wrapper{
width:250px;
background-color:red;
}
#SmileImg{
height:100px;
display: inline-block;
vertical-align: middle;
}
.textwrapper{
display: inline-block;
}
<div class="wrapper">
<img src="http://img.xcitefun.net/users/2010/02/147370,xcitefun-smile-4.png" id="SmileImg" />
<div class="textwrapper">
<p>Please Smile!</p>
</div>
</div>
use display: table
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.wrapper{
width:250px;
background-color:red;
display: table;
}
.item{
display: table-cell;
vertical-align: middle;
}
#SmileImg{
height:100px;
width:auto;
}
<div class="wrapper">
<div class="item">
<img src="http://img.xcitefun.net/users/2010/02/147370,xcitefun-smile-4.png" id="SmileImg" />
</div>
<div class="item">
<p>Please Smile!</p>
</div>
</div>
Related
I'm trying to get the words 'method' and 'text' to vertically align in the 'affiliates-methodology-text' div but can't get it to work. I've tried aligning vertically, wrapping the text in a block, setting the line height, looking at other very similar threads, etc but can't get it working either way. Can anybody please help? note that this is a template and where it says 'text' will have a description longer than 1 line
The code is below, or find it here: jsfiddle.net/bxvge3rh/
HTML:
<div class="affiliates-methodology-wrap">
<div class="affiliates-methodology-text">
<h3 class="affiliates">Method</h3>
<p class="affiliates2">text...</p>
</div>
<div class="affiliates-methodology-picture"></div>
</div>
CSS:
.affiliates-methodology-text{
width:810px;
height:150px;
background:#039;
float:left;
text-align:left;
}
.affiliates-methodology-picture{
width:150px;
height:150px;
background:#9F0;
float:left;
}
.affiliates-methodology-wrap{
background:#F00;
height:auto;
width:auto;
}
You need to use the display: table; and display: table-cell; properties.
Here is a jsfiddle: https://jsfiddle.net/hLd3z3mt/1/
HTML
<div class="affiliates-methodology-wrap">
<div class="affiliates-methodology-text">
<div class="outerDiv">
<div class="valign">
<h3 class="affiliates">Method</h3>
<p class="affiliates2">text...</p>
</div>
</div>
</div>
<div class="affiliates-methodology-picture"></div>
</div>
CSS
.affiliates-methodology-text{
width:810px;
height:150px;
background:#039;
text-align: left;
float: left;
}
.outerDiv {
display: table;
}
.valign {
display: table-cell;
vertical-align: center !important;
padding-top: 40%;
}
.affiliates-methodology-picture{
width:150px;
height:150px;
background:#9F0;
float:left;
}
.affiliates-methodology-wrap{
background:#F00;
height:auto;
width:auto;
}
If you mean horisontal alignment of the header and paragraph tag you can use the inline method of the display property, like this for example:
HTML
<div class="wrap">
<h3>Some h3 tag</h3>
<p>Some p tag</p>
</div>
CSS
// All child elements inside the div with class 'wrap' will display as inline
.wrap > * {
display:inline;
}
You could achieve this with flexbox.
.affiliates-methodology-text {
display: flex;
align-items: center;
}
<div class="image">
</div>
<div class="form">
</div>
.image{
float:left;
}
.form{
float:left;
}
This will put them side-by-side on the left-hand side of the screen. But how can I center them?
You must to change all behaviour. First wrap the html like this:
<div class="wrapper">
<div class="image">
</div>
<div class="form">
</div>
</div>
And the CSS:
.wrapper {
text-align : center;
}
.image, .form {
display: inline-block;
vertical-align: top;
}
I have a set of divs within a slider that are floated. and within these divs I would like to vertically center content, mainly text. I tried something like this but it doesn't work:
<div class="floated">
<div class="table">
<div class"table-cell">
<p>text</p>
</div>
</div>
</div>
.floated{
float:left;
}
.table{
display:table;
vertical-align:middle;
height:100%;
}
.table-cell{
display:table-cell;
}
IMPORTANT: I can't set the height of any parent elements!
.floated { float:left; }
.table { display:table; height:100%; }
.table-cell { display:table-cell; vertical-align:middle; }
<div class="floated">
<div class="table">
<div class="table-cell">
<p>text</p>
</div>
</div>
</div>
vertical-align is on table-cell not table
you missed "=" at this line <div class"table-cell">
your div has a typo and try adding a margin to your table display
<div class="floated">
<div class="table">
<div class="table-cell">
<p>text</p>
</div>
</div>
</div>
.floated{
float:left;
}
.table{
display:table;
vertical-align:middle;
height:100%;
margin: 0 auto;
}
.table-cell{
display:table-cell;
}
I want the input to be width: 100%; and be on the right of the image.
Is it possible without using a table? If it is how can I achieve that?
HTML:
<div class="wrapper">
<img src="http://www.iconpot.com/icon/thumbnail/geek-avatar.jpg" />
<input/>
</div>
CSS:
input {
width:100%;
float:left;
}
FIDDLE
Thank you
You could do this with calc()
FIDDLE
input
{
width: calc(100% - 130px); /* width of img + extra padding between */
}
You could also align the input by styling the img
img
{
vertical-align: middle; /* or top /bottom.. etc */
}
Demo: http://jsfiddle.net/abhitalks/DL8kG/9/
Idea:
Wrap your image and input in their own containers. Use display: table-cell on containers. Use vertical-align: middle to line up. This will allow you to have 100% width.
Markup:
<div class="wrapper">
<div class="imgWrap">
<img src="http://www.iconpot.com/icon/thumbnail/geek-avatar.jpg" />
</div>
<div class="inputWrap">
<input/>
</div>
</div>
CSS:
div.wrapper {
width: 100%;
}
.imgWrap {
display: table-cell;
}
.inputWrap {
display: table-cell;
width: 100%;
vertical-align: middle;
padding: 4px;
}
input {
width: 100%;
}
Use a floating and overflow trick. Float your image to the left and place your input in a container that will have its overflow hidden. Give the input a width of 100%. The input's container will take up the remainder of the screen (what I assume you mean by 100%):
HTML
<div class="wrapper">
<img src="http://www.iconpot.com/icon/thumbnail/geek-avatar.jpg" />
<div class="inp"><input/></div>
</div>
CSS
img{
float:left;
}
.inp{
overflow:hidden;
background:#F00;
}
.inp input{
width:100%;
}
JSFiddle
Please take note of how your default styles (padding, border..) will affect the total width of the input.
<div class="wrapper">
<div id="img">
<img src="http://www.iconpot.com/icon/thumbnail/geek-avatar.jpg" />
</div>
<div id="input">
<input/>
</div>
</div>
CSS
#input {
display:table-cell;
}
input{
width:100%;
float:left;
}
#img {
width:130px;
float:left;
border:1px solid black;
display:table-cell;
}
Fiddle
<div class="wrapper">
<img src="http://www.iconpot.com/icon/thumbnail/geek-avatar.jpg" style="float:left"/>
<div style="float:left">
<input />
</div>
i have 3 divs conatined within an outer div. i am aligning them horizontally by floating them left. and div3 as float right
<div id="outer">
<div id="div1">always shows</div>
<div id="div2">always shows</div>
<div id="div3">sometimes shows</div>
</div>
div1 and div3 have fixed sizes.
if div3 is left out i want div 2 to fill up the remaining space. how can i do it?
What about something like this? https://jsfiddle.net/Siculus/9vs5nzy2/
CSS:
#container{
width: 100%;
float:left;
overflow:hidden; /* instead of clearfix div */
}
#right{
float:right;
width:50px;
background:yellow;
}
#left{
float:left;
width:50px;
background:red;
}
#remaining{
overflow: hidden;
background:#DEDEDE;
}
Body:
<div id="container">
<div id="right">div3</div>
<div id="left">div1</div>
<div id="remaining">div2, remaining</div>
</div>
This is a technique using display: table; https://jsfiddle.net/sxk509x2/
Browser support (ie 11+): http://caniuse.com/#feat=css-table
HTML
<div class="outer">
<div class="static pretty pretty-extended">$</div>
<input class="dynamic pretty" type="number" />
<div class="static pretty">.00</div>
</div>
CSS
.outer{
width:300px;
height:34px;
display:table;
position: relative;
box-sizing: border-box;
}
.static{
display:table-cell;
vertical-align:middle;
box-sizing: border-box;
}
.dynamic{
display:table-cell;
vertical-align:middle;
box-sizing: border-box;
width: 100%;
height:100%;
}
.pretty{
border: 1px solid #ccc;
padding-left: 7px;
padding-right: 7px;
font-size:16px;
}
.pretty-extended{
background: #eee;
text-align:center;
}
The classes that contain "pretty" are not required to accomplish what you are trying to do. I just added them for appearances.
You don't need to float #div2, it'll automatically fill up the remaining space.
If you want borders/padding, you ought to give #div2 a child element.