I need to locate that question icon in middle of textarea height.
Vertical align does work.
I have main div .contorls, inside my link with question with float:right and after that textarea.
How to locate this icon?
<div class="control">
<textarea></textarea>
<div class="icon"></div>
</div>
.control{width:700px;height:auto;}
.icon{height:20px;width:20px;}
Here is a fairly simple way to do it.
Use CSS tables by applying display: table to the .control parent element and display: table-cell to the .wrapper child element. Within .wrapper, use vertical-align: middle to vertically center the icon element.
CSS tables are pretty well supported by most modern browsers so the solution is fairly robust.
.control {
display: table;
width: 700px;
height: auto;
border: 1px dotted blue;
}
.control .wrapper {
display: table-cell;
width: 100%;
height: 100%;
border: 1px dashed blue;
vertical-align: middle;
}
.icon {
height: 20px;
width: 20px;
margin-left: 5px; /* optional if needed */
background-color: tan;
display: inline-block;
}
<div class="control">
<textarea></textarea>
<div class="wrapper">
<div class="icon"></div>
</div>
</div>
Related
As image, is it possible if the green element is aligned center when its needed width is shorter than parent width - yellow shape width, but align right if not? Thanks.
Without any library (e.g. Bootstrap), you could use a div with display: table; and margin: 0 auto;, nested with another div with display: inline-block; property.
This is the example:
.row {
margin-bottom: 10px;
}
.yellowBlock {
display: inline-block;
background-color: yellow;
border: 1px solid #ffc107;
border-radius: 5px;
width: 20%;
height: 30px;
}
.pre-greenBlock {
display: inline-block;
width: 70%;
}
.greenBlock {
display: table;
margin: 0 auto;
background-color: lightgreen;
border: 1px solid green;
border-radius: 5px;
padding: 0 10px;
height: 30px;
}
<div class="row">
<div class="yellowBlock"></div>
<div class="pre-greenBlock">
<div class="greenBlock">Short text</div>
</div>
</div>
<div class="row">
<div class="yellowBlock"></div>
<div class="pre-greenBlock">
<div class="greenBlock">Very looooooooooooooooooooooooong</div>
</div>
</div>
Obviously, you need control the width of your yellow and green block.
This isn't the unique solution. You could use too a table or Bootstrap with row and columns.
Using display:table;, I am trying to vertically align two inline div's with different heights inside a fixed width container.
display:table; and display:table-cell with vertical-align: middle; is a very simple solution to this that works in certain circumstance - however in this it seems I have missed something.
The result of my fiddle is a correct vertical-align however each element is not holding their responsive widths to fill the entire container space. i.e. 2 elements inside the container equal 50% width.
Here is my code:
HTML
<div class="table container">
<div class="inner-column table-cell">
<div class="table inner-container">
<div id="left" class="table-cell">
content
</div>
</div>
</div>
<div class="inner-column table-cell">
<div class="table inner-container">
<div id="right" class="table-cell">
content
</div>
</div>
</div>
</div>
CSS
body {
width: 100%;
margin: 0 auto;
background: white;
color: white;
text-align: center;
background: white;
}
.table {display: table;}
.table-cell {display: table-cell; vertical-align: middle;}
.container {
width: 600px;
height: 200px;
background: lightgrey;
margin: 0 auto;
white-space: nowrap;
padding: 0
}
.inner-column {
display: inline-block;
white-space: normal;
width: 50%;
height: 100%;
border:1px blue solid;
padding: 0;
margin: 0;
}
.inner-container {
margin: 0 auto;
width: 100%;
}
#left {
background-color: red;
height: 120px;
}
#right {
background-color: purple;
height: 170px;
}
Here is the above in a FIDDLE
Problem List:
Width of the inner-column is slightly bigger than the container
each element container is not vertically aligned to the fixed height of the container.
display:table-cell is not being applied since you wrote this code before display:inline-block.
I have updated fiddle
https://jsfiddle.net/dgzp6h2w/1/
The input element seems to drag down the parent div. Why is this happening? How can I fix it?
The html
<div class="main">
<div class="one">
</div>
<div class="two">
<input type="text" /> <!-- Without this input, the page looks fine -->
</div>
<div class="three">
</div>
</div>
The css
.main>div {
display: inline-block;
height: 330px;
}
.one {
width: 18%;
background-color: #fbfbfb;
}
.two {
margin-left:10px;
width: 50%;
border: 2px solid #ddd;
}
.three {
margin-left: 10px;
width: 20%;
background-color: #bbb;
border: 5px dashed #ddd;
}
Here is the effect: http://jsbin.com/gubozapove/edit?output
It is because you have given: display: inline-block;. To work around this, give:
vertical-align: top;
Preview
Reason: Inline Block elements tend to align to the baseline by default.
Fiddle: http://jsbin.com/kitazeweqi/1/edit?output
Add
vertical-align: text-top;
to your .main>div.
You can fix it adding float: left; to .one and .two
Below I have 3 rows (.child) with different heights.
The height of the parent (#parent) cannot be known in advance and it will actually change if the height of its parent (the parent of #parent) changes.
Is there some CSS combination that I could use that would set the margins between those rows in such a way that the rows are spread out evenly on the vertical ?
Similar to when we have cells with different widths that we want to spread out evenly on the horizontal. This is easy to achieve by using display: table-cell; I believe, even if the width of their parent is unknown.
JSFIDDLE : http://jsfiddle.net/7ty82k3b/5/
CSS :
#parent {
display: table;
position: fixed;
top: 0px;
left: 0px;
height: 100%;
width: 93px;
background-color : red;
}
.child {
position : relative;
float: left;
clear: both;
border: 1px solid blue;
display: table-row;
width: 91px;
}
span.child {text-align:center;}
HTML :
<body>
<div id="parent">
<img class="child" src="http://www.philreinhardt.com/downloads/SuperSqueezePages/Super%20Squeeze%20Page%20Pack/BonusMoreAnimatedArrows/More%20Animated%20Arrows/Arrow%20Right%201/Arrow%20Right%201%20Small/ArrowRightBlueSmall.gif">
<span class="child">Hey!</span>
<img class="child" src="http://www.philreinhardt.com/downloads/SuperSqueezePages/Super%20Squeeze%20Page%20Pack/BonusMoreAnimatedArrows/More%20Animated%20Arrows/Arrow%20Right%201/Arrow%20Right%201%20Small/ArrowRightBlueSmall.gif">
</div>
</body>
Wrap your .child inside some .row so you can display the .row as a table-row and the .child as a table-cell and then vertical-align: middle them. Also, keep in mind that images are crybabies that won't handle very well "exotic" displays, so don't try to display them as table-row or table-cell.
#parent {
display: table;
position: fixed;
top: 0px;
left: 0px;
height: 100%;
width: 93px;
background-color: red;
}
.row {
display: table-row;
}
.child {
position: relative;
border: 1px solid blue;
display: table-cell;
vertical-align: middle;
}
span.child {
text-align: center;
}
<div id="parent">
<div class="row">
<div class="child">
<img src="http://www.philreinhardt.com/downloads/SuperSqueezePages/Super%20Squeeze%20Page%20Pack/BonusMoreAnimatedArrows/More%20Animated%20Arrows/Arrow%20Right%201/Arrow%20Right%201%20Small/ArrowRightBlueSmall.gif">
</div>
</div>
<div class="row"> <span class="child">Hey!</span>
</div>
<div class="row">
<div class="child">
<img src="http://www.philreinhardt.com/downloads/SuperSqueezePages/Super%20Squeeze%20Page%20Pack/BonusMoreAnimatedArrows/More%20Animated%20Arrows/Arrow%20Right%201/Arrow%20Right%201%20Small/ArrowRightBlueSmall.gif">
</div>
</div>
</div>
I've searched it at online and found some solution. But, nothing works at my project. At most of the solution, I've found:
<div class="a">
<div class="b">
Unknown stuff to be centered.
</div>
</div>
.a {
display: table;
width: 100%;
}
.b {
display: table-cell;
text-align: center;
vertical-align: middle;
}
By applying this technique, I've tried to build something like this: http://jsfiddle.net/L2GZx/1/
The text of left column only needed to be aligned middle vertically. But, it's not working with that technique:
<div class="row">
<div class="left">
<p>Sample Text</p>
</div>
<div class="right">
<p>Text</p>
<p>Input Element</p>
<p>Table</p>
<p>Image</p>
</div>
</div>
<div class="row">
<div class="left">
<p>Sample Text Sample Text Sample Text Sample Text Sample Text </p>
</div>
<div class="right">
<p>Text</p>
<p>Input Element</p>
<p>Table</p>
<p>Image</p>
</div>
</div>
<div class="row">
<div class="left">
<p>Sample Text</p>
</div>
<div class="right">
<p>Text</p>
<p>Input Element</p>
<p>Table</p>
<p>Image</p>
</div>
</div>
CSS:
.row {
width: 100%;
background: #ccc;
border-bottom: 1px solid #999;
display: table;
}
.left {
float: left;
width: 40%;
padding: 20px;
display: table-cell;
vertical-align: middle;
}
.right {
float: right;
background: #fff;
width: 40%;
padding: 20px;
}
How can I make the text of left-column aligned middle vertically? Note: I can't use any fixed height as content of each row will be different
Remove the floats. Floated elements can not also be displayed as table-cells. See updated Fiddle.
.row {
width: 100%;
background: #ccc;
border-bottom: 1px solid #999;
display: table;
}
.left {
width: 40%;
padding: 20px;
display: table-cell;
vertical-align: middle;
}
.right {
display: table-cell;
background: #fff;
width: 40%;
padding: 20px;
}
.left {
width: 40%;
padding: 20px;
display: table-cell;
vertical-align: middle;
}
removing" float:left " from .left style solves that issue, but using table and div together is not that good.Working Example
An alternative that I prefer in a situation like this is:
To not use display: table-cell, but rather use display:
inline-block.
To then use vertical-align: middle on the element.
Sample (revised) markup / css:
<div class="row">
<div class="left">
<p>Sample Text</p>
</div>
<div class="right">
<p>Text</p>
<p>Input Element</p>
<p>Table</p>
<p>Image</p>
</div>
</div>
CSS:
.row {
width: 100%;
background: #ccc;
border-bottom: 1px solid #999;
}
.row > div {
display: inline-block;
/* below 2 lines are IE7 hack to make inline-block work */
zoom: 1;
*display: inline;
/* below is consolidated css for both left / right divs */
width: 40%;
padding: 20px;
}
.left {
vertical-align: middle; /* or top or bottom */
}
.right {
background: #fff;
vertical-align: top; /* or middle or bottom */
}
All you have to do is to add a line-height to the left column and it will be automatically aligned (without vertical-align so you can remove it).
Here it is:
.left {
float: left;
width: 40%;
padding: 20px;
display: table-cell;
line-height:150px;
}
And here is your updated FIDDLE
Using your first example, try something like this. I'll explain how it works in the CSS.
<div class="a">
<div class="b">
Unknown stuff to be centered.
</div>
</div>
.a {
width: 100%;
position: relative; /* We want our parent div to be the basis of our absolute positioned child div */
/* You can set your height here to whatever you want */
}
.b {
position: absolute;
width: 100%; /* Set to be the full width, so that our text is aligned centered */
text-align: center;
top: 50%; /* Positions the top of the div at 50% of the parent height */
left: 0; /* Assures that the child div will be left-most aligned */
margin-top: -.5em; /* Moves the top of our div up by half of the set font size */
height: 1em; /* Sets our height to the height of the desired font */
}
Here is the JSFiddle link to see a live example: http://jsfiddle.net/L2GZx/20/
This is one of the best solutions to absolutely center text inside of a webpage. It does have it's limitations however seeing how it won't react to other elements inside the same parent and it also has to have a set height. So multiline text will have it's shortcomings with this method.
I hope this helps!