I have following code snippet
body {
margin: 0 auto;
min-width: 480px;
padding: 0;
width: 800px;
}
#media (max-width: 840px) {
body {width: 95%; }
}
div.top-header-cont {
display: flex;
}
header {
display: inline-block;
width: auto;
}
div .theme-select-cont {
display: inline-block;
flex-grow: 100;
}
div .theme-select-table-wrapper {
display: table;
height: 100%;
width: 100%;
}
div .theme-select-table-cell-wrapper {
display: table-cell;
vertical-align: middle;
}
<div class="top-header-cont">
<header>
<h1>TODO</h1>
</header>
<div class="theme-select-cont">
<div class="theme-select-table-wrapper">
<div class="theme-select-table-cell-wrapper"><select>
<option value="base16-dark">base16-dark</option>
</select></div>
</div>
</div>
</div>
It looks like this in browser
I suspect that I can do the same easier, I mean place select element centered vertically relative to h1 element and on right side of page. I don't know how to do it without table wrappers. Or maybe another way, without flexed div elements. Any way my variant looks too mach complex for such easy task like place two element at top of page. What you can suggest to solve this problem? I have seen some solutions using absolute div positioning, but it is not appropriate in my case.
You can use position absolute and transform: translateY(-50%) to vertically center if the 2 elements are bound by the same wrapper with a relative position.
Just make the header position relative, put the select element in there right after the h1 and give it a class to target.
<header>
<h1>TODO</h1>
<select class="select-box">
<option value="base16-dark">base16-dark</option>
</select>
</header>
header{
position:relative;
}
.select-box{
position:absolute;
top:50%;
right:2rem;
transform:translateY(-50%);
}
You may find it easier to balance it the way you have it now. Remember that absolute items don't really know of the surrounding elements so they can overlap if you don't handle your break points correctly.
You can also do this with grid, but until grid is fully supported I'll refrain from providing examples.
PART 1:
I am trying to make my parent div increase with height as the contents. it is a slide show contained in a parent div and the slide show is responsive. Everything sits fine but 10px padding is not reflected around the main container. Any help?
Example:
.mainer {
width: 100%;
background-color: red;
padding: 10px
}
.slide_wrapper {
width: 60%;
height: inherit;
top: 10px;
border: 0px solid black;
clear: left;
margin: 0 auto;
position: relative;
text-align: center;
}
<div class="mainer">
<div class="slide_wrapper">
<div class="carousel_slider">
<div class="item" style="width:100%;">
<img src="image.jpg" style="width:100%;height:auto" />
</div>
</div>
</div>
</div>
Part 2:
(Bonus for me.)
Assuming that I am also trying to include a different div class="rightbox" to the right of the container class="carousel_slider". Both of them have to stay inside the main container. How can I achieve this? Part 2 is just a curiosity for me.
Any help?.
Thanks and appreciation in Advance.
Michelle
Your problem might be related to using a clear without a clearfix. I'm not entirely sure why you have clear:left to begin with really, you don't have any other floated elements to clear in your html. Anyhow, when you clear an element, it no longer takes up space normally. The item within the cleared element will still take up space, but you can't apply margins and padding normally to a cleared element without clearfix. Here's one you can use easily.
http://nicolasgallagher.com/micro-clearfix-hack/
That being said, clear + clearfix is fairly depreciated and you may find better results elsewhere. Try making .mainer relatively positioned, and absolutely position .slide_wrapper inside of it. That should allow you to set the width to 60% still and align it relative to the top and left of .mainer. Perhaps look into flexbox if you aren't using old versions of internet explorer. I'm not going to explain all of flexbox here as other's have already done it and better, but it allows you to align items intelligently to their parent container and is particularly helpful if you element has siblings.
padding: 10px on the parent is being applied, but you have top: 10px on the img that is pushing it down 10px and messing up the bottom padding of the parent. To increase the space between the top of the image and the parent without messing up the bottom padding of the parent, use padding-top or margin-top instead of top on the img
And to put .rightbox beside of .carousel_slider, make the parent display: flex and it will put those 2 children in adjacent columns in a row.
.mainer {
width: 100%;
background-color: red;
padding: 10px;
}
.slide_wrapper {
height: inherit;
border: 0px solid black;
clear: left;
margin: 0 auto;
position: relative;
text-align: center;
padding-top: 10px;
}
.slide_wrapper {
display: flex;
align-items: flex-start;
justify-content: center;
}
.rightbox {
width: 100px;
height: 100px;
}
<div class="mainer">
<div class="slide_wrapper">
<div class="carousel_slider">
<div class="item" style="width:100%;">
<img src="http://kenwheeler.github.io/slick/img/fonz1.png" style="width:100%;height:auto"/>
</div>
</div>
<div class="rightbox">rightbox</div>
</div>
</div>
I need to fix a problem on an existing web page, I need to center elements that have float : left; inside one big <div>. I don't want to remove the floating, and I'm wondering what is the best way to center those elements and make them on two rows.
.big {
width: 150px;
height: 150px;
background: gold;
}
.a {
margin: 5px;
width: 50px;
height: 20px;
text-align: center;
float: left;
background-color: red;
}
<div class="big">
<div class="a">1</div>
<div class="a">2</div>
<div class="a">3</div>
<div class="a">4</div>
</div>
Floating makes this weird. Otherwise
.big{
width:150px;
height: 150px;
background: gold;
text-align: center;
}
.a{
display: inline-block;
margin: 5px auto;
width:50px;
height:20px;
text-align: center;
background-color:red;
}
<div class="big">
<div class="a">1
</div>
<div class="a">2
</div>
<div class="a">3
</div>
<div class="a">4
</div>
</div>
You may use flexbox.
.big{
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
background: gold;
width: 150px;
height: 150px;
}
.a {
flex: 0 0 35%;
margin: 5px;
width: 50px;
height: 20px;
text-align: center;
float: left;
background-color: red;
}
<div class="big">
<div class="a">1
</div>
<div class="a">2
</div>
<div class="a">3
</div>
<div class="a">4
</div>
</div>
I do not believe there is a point in floating if you do have no intention of wanting to float to the top and to the left. You need to master the use of both position and display properties. This I believe is what you are looking for. I have put explanations underneath explaining what the relevant display and position properties, as well as why I used what I did.
.big {
width: 150px;
height: 150px;
background: gold;
}
.a {
position: relative;
left: 12px;
display:inline-block;
margin: 5px;
width: 50px;
height: 20px;
text-align: center;
background-color: red;
}
Positioning is how the element is positioned in the document. The options in CSS are either static, relative, absolute, fixed.
Static: This is the browser default. It is not affected by positioning, and will just be positioned in the natural flow of the page.
Relative: Will cause element to be positioned relative to it's initial position. (i.e.: if the element is positioned at X (initial position), then will be moved depending on what properties put in)
Absolute: Will cause element to be positioned relative to next parent element. An important thing to note about this is that elements are removed from the flow of the page meaning that it is possible to have multiple elements stack on top of one another.
Fixed: Will cause element to be fixed relative to the browser window, commonly known as viewport itself. If you scroll down, the position will be fixed, hence the name.
Display
This is how the browser will treat the type of "box"/element that is used (all elements can be considered boxes, as per the box model).If you have trouble grasping the concept, put element {border: solid black} into all your css elements and you'll see what I mean.
There are multiple displays will only get into the 3 of the arguably most important ones: block, inline, inline-block.
Block: element will take up the maximum amount of horizontal space necessary. Think of the li as an example. The list point will take up the maximum amount of horizontal space, and thus each separate li can be considered a block.
Inline: element will take up the minimum amount of horizontal, and vertical space necessary to fit within the flow. Think of the anchor a tag, as it will take up the minimum amount of space necessary to fit within the flow of a paragraph.
Inline-block: Considered an inline value but with the ability to change the width and height of the element.
For your example, I have used the relative positioning element (positioned it right 12px relative to where it originally was) and changed the display to be inline-block, as divs are naturally block elements and thus, without the inline-block display feature, they would have only stacked 1 at a time.
I've got some questions about CSS text alignment that I am having some difficulty understanding. The best resource I've found about vertically aligning text via CSS is this: http://blog.themeforest.net/tutorials/vertical-centering-with-css/
I have a fiddle demonstrating some ways to vertically align text, and I'd appreciate if someone gave a quick answer.
http://jsfiddle.net/zSCJr/6/
I am curious why this text is not bottom aligned in container2's child, and have 5 quick questions in the JSfiddle.
HTML:
<div class="container container2">
container2
<div class="parent">
parent
<span class="child">
child<br/>
child
</span>
</div>
</div>
CSS:
.parent {
border: 1px solid green;
height: 50%;
}
.child {
border: 1px solid red;
vertical-align: bottom;
}
.container {
border: 1px solid black;
height: 150px;
margin-bottom: 40px;
}
.container1 .parent, .container2 .parent {
display: table;
}
.container1 .child, .container2 .child {
display: table-cell;
}
.container2 {
position: relative;
}
.container2 .parent {
width: 100%;
}
.container2 .child {
position: absolute;
right: 0;
top: 0;
bottom: 0;
}
I tried to reply at what I understand to your questions.
However, if you have an image result of what you want, it will be easier to us to give you the code or tell you how to achieve what you want.
Here is the JSFIDDLE where I put your questions answer.
Questions
1) removing position: absolute from container2's child makes the text align to the bottom (as expected from vertical-align: bottom). why?
2) container3's child,child,child span only gets clipped clipped by the first ancestor which has overflow:hidden AND position:something. why is position required?
3) container4's child does not stretch vertically unless position: absolute is set (position: relative will not do anything).
4) container4's child's height: 100% will use the first parent that has a position set. why not the first parent's content height?
5)container4's child has vertical-align: bottom set. But its text is not aligned to the bottom (unlike in container1 where parent has display: table and child has display: table-cell.
Answers
1)
On your css, you can reveiw that .container2 .child and .child css is applicated to your class, so removing only one vertical align on one class will still stick the table content to the bottom because .container2 .child is display as table cell
2)
I don't understand your question, what don't you don't understand?
If you have an image result of what you want, I can code it and you will learned from it.
3)
Inside a table, everything is managed differently, you need to define how to display your content. You need to aply display: block to .container4 .child
4)
Because you have the choice =)
So set the parent position of the item that you want
5)
Because you forgot to add .container4 .parent {display: table;} and .container4 .child {display: table-cell;}
Hope this help =)
I'm trying to vertically center a span or div element within another div element. However when I put vertical-align: middle, nothing happens. I've tried changing the display properties of both elements, and nothing seems to work.
This is what I'm currently doing in my webpage:
.main {
height: 72px;
vertical-align: middle;
border: 1px solid black;
padding: 2px;
}
.inner {
vertical-align: middle;
border: 1px solid red;
}
.second {
border: 1px solid blue;
}
<div class="main">
<div class="inner">
This box should be centered in the larger box
<div class="second">Another box in here</div>
</div>
</div>
Here is a jsfiddle of the implementation showing that it doesn't work: http://jsfiddle.net/gZXWC/
Using CSS3:
<div class="outer">
<div class="inner"/>
</div>
Css:
.outer {
display : flex;
align-items : center;
}
use "justify-content: center;" to align elements horizontally
Note: This might not work in old IE's
This seems to be the best way - some time has passed since my original post and this is what should be done now:
.main {
display: table;
/* optional css start */
height: 90px;
width: 90px;
/* optional css end */
}
.inner {
border: 1px solid #000000;
display: table-cell;
vertical-align: middle;
}
<div class="main">
<div class="inner"> This </div>
</div>
Try this, works for me very well:
/* Internet Explorer 10 */
display:-ms-flexbox;
-ms-flex-pack:center;
-ms-flex-align:center;
/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;
/* Safari, Opera, and Chrome */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
/* W3C */
display:box;
box-pack:center;
box-align:center;
Setting the line-height to the same height as it's containing div will align content in the middle vertically;
DEMO http://jsfiddle.net/kevinPHPkevin/gZXWC/7/
.inner {
line-height:72px;
border: 1px solid #000000;
}
In case you cannot rely on flexbox... Place .child into .parent's center. Works when pixel sizes are unknown (in other words, always) and no problems with IE9+ too.
.parent { position: relative; }
.child {
position: absolute;
top : 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform : translate(-50%, -50%);
}
<div class="parent" style="background:lightyellow; padding:6em">
<div class="child" style="background:gold; padding:1em">—</div>
</div>
You should put vertical-align: middle on the inner element, not the outer element. Set the line-height property on the outer element to match the height of the outer element. Then set display: inline-block and line-height: normal on the inner element. By doing this, the text on the inner element will wrap with a normal line-height. Works in Chrome, Firefox, Safari, and IE 8+
.main {
height: 72px;
line-height:72px;
border: 1px solid black;
}
.inner {
display: inline-block;
vertical-align: middle;
line-height: normal;
}
<div class="main">
<div class="inner">Vertically centered text</div>
</div>
Fiddle
I used this to align everything in the center of the wrapper div in case it helps anyone - I found it simplest:
div.wrapper {
/* --- This works --- */
display: flex;
/* Align Vertically */
align-items: center;
/* Align Horizontally */
justify-content: center;
/* --- ---------- ----- */
width: 100%;
height:100px;
background-color: blue;
}
div.inner {
width: 50px;
height: 50px;
background-color: orange;
}
<div class="wrapper">
<div class="inner">
</div>
</div>
This is a modern approach and it utilizes the CSS Flexbox functionality.
You can now vertically align the content within your parent container by just adding these styles to the .main container
.main {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center; // To center align it horizontally as well
}
You can also use CSS Grids ( a two-dimensional grid-based layout system).
.main {
display: grid;
justify-content: center;
align-content: center;
}
Below is a Shorthand approach but browser support is still low - https://caniuse.com/?search=place-items.
.main {
display: grid; // flex - works for both
place-items: center;
}
And you are good to go!
HTML
<div id="myparent">
<div id="mychild">Test Content here</div>
</div>
CSS
#myparent {
display: table;
}
#mychild {
display: table-cell;
vertical-align: middle;
}
We set the parent div to display as a table and the child div to display as a table-cell. We can then use vertical-align on the child div and set its value to middle. Anything inside this child div will be vertically centered.
Here you have an example of two ways of doing a vertical alignment. I use them and they work pretty well. One is using absolute positioning and the other using flexbox.
Vertical Align Example
Using flexbox, you can align an element by itself inside another element with display: flex; using align-self. If you need to align it also horizontally, you can use align-items and justify-content in the container.
If you don't want to use flexbox, you can use the position property. If you make the container relative and the content absolute, the content will be able to move freely inside the container. So if you use top: 0; and left: 0; in the content, it will be positioned at the top left corner of the container.
Then, to align it, you just need to change the top and left references to 50%. This will position the content at the container center from the top left corner of the content.
So you need to correct this translating the content half its size to the left and top.
here is a great article of how to vetical align..
I like the float way.
http://www.vanseodesign.com/css/vertical-centering/
The HTML:
<div id="main">
<div id="floater"></div>
<div id="inner">Content here</div>
</div>
And the corresponding style:
#main {
height: 250px;
}
#floater {
float: left;
height: 50%;
width: 100%;
margin-bottom: -50px;
}
#inner {
clear: both;
height: 100px;
}
It's simple. Just add display:table-cell in your main class.
.main {
height: 72px;
vertical-align: middle;
display:table-cell;
border: 1px solid #000000;
}
Check out this jsfiddle!
Here is the latest simplest solution - no need to change anything, just add three lines of CSS rules to your container of the div where you wish to center at. I love Flex Box #LoveFlexBox
.main {
/* I changed height to 200px to make it easy to see the alignment. */
height: 200px;
vertical-align: middle;
border: 1px solid #000000;
padding: 2px;
/* Just add the following three rules to the container of which you want to center at. */
display: flex;
flex-direction: column;
justify-content: center;
/* This is true vertical center, no math needed. */
}
.inner {
border: 1px solid #000000;
}
.second {
border: 1px solid #000000;
}
<div class="main">
<div class="inner">This box should be centered in the larger box
<div class="second">Another box in here</div>
</div>
<div class="inner">This box should be centered in the larger box
<div class="second">Another box in here</div>
</div>
</div>
Bonus
the justify-content value can be set to the following few options:
flex-start, which will align the child div to where the flex flow starts in its parent container. In this case, it will stay on top.
center, which will align the child div to the center of its parent container. This is really neat, because you don't need to add an additional div to wrap around all children to put the wrapper in a parent container to center the children. Because of that, this is the true vertical center (in the column flex-direction. similarly, if you change the flow-direction to row, it will become horizontally centered.
flex-end, which will align the child div to where the flex flow ends in its parent container. In this case, it will move to bottom.
space-between, which will spread all children from the beginning of the flow to the end of the flow. If the demo, I added another child div, to show they are spread out.
space-around, similar to space-between, but with half of the space in the beginning and end of the flow.
Since vertical-align works as expected on a td, you could put a single celled table in the div to align its content.
<div>
<table style="width: 100%; height: 100%;"><tr><td style="vertical-align: middle; text-align: center">
Aligned content here...
</td></tr></table>
</div>
Clunky, but works as far as I can tell. It might not have the drawbacks of the other workarounds.
Just put the content inside a table with height 100%, and set the height for the main div
<div style="height:80px;border: 1px solid #000000;">
<table style="height:100%">
<tr><td style="vertical-align: middle;">
This paragraph should be centered in the larger box
</td></tr>
</table>
</div>
To vertically center a span or div element within another div, add position relative to parent div and position absolute to the child div.Now the child div can be positioned anywhere inside the div.Example below centers both horizontally and vertically.
<div class="parent">
<div class="child">Vertically and horizontally centered child div</div>
</div>
css:
.parent{
position: relative;
}
.child{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
set below CSS
/*Parent*/
display: table;
/*immediate child*/
display: table-cell;
vertical-align: middle;
~Rahul Daksh
THIS IS THE ANSWER:
vertical-align aligns elements relative to the dimensions of the line the element appears in.
reference: https://christopheraue.net/design/why-vertical-align-is-not-working
The question was "WHY?".
The answer: vertical-align only works in certain conditions
in the "display: table-cell;"