This question has been asked several time on stackoverflow, however I was wondering if someone -perhaps you- doesn't have a unique solution to my problem.
I currently have an parent div that is of varying height and width whose contents are also of varying width and height. To vertically align the child div I have styled it's parent as display: table; and it as display: table-cell; and nested yet another div, as seen below:
<!-- css styling -->
<style type="text/css">
.div-table {
display: table;
position: absolute;
height: 100%;
width: 100%;
}
.div-cell {
display: table-cell;
padding: 10px;
vertical-align: middle;
}
.div-alignedcontents {
margin-left: auto;
margin-right: auto;
text-align: center;
}
</style>
<!-- html -->
<div class="div-table">
<div class="div-cell">
<div class="div-alignedcontents">
<p>Some content that has a varying height and width!</p>
</div>
</div>
</div>
The problem is that the overflow:hidden property doesn't seem to work on tables, and table-layout: fixed property doesn't constrain vertical proportions/height. One solution would be to nest all the above html in yet another div and style that div with overflow:hidden, however I thought I might pick your brains for any suggestions first.
Thank you in advance for any help.
One solution could be defining padding for .div-cell in percentage and subtracting the same padding from the width of your div-table. Something like this:
.div-table {
width: 95%
height: 95%
}
.div-cell {
padding: 2.5%
}
Fiddle
Related
I am struggling centering content vertically. Here is a screenshot:
I need a float left as there will be more content on the side which you can't see but yeah how can I get this text to vertically be in the center? Also I am not sure if I do need a tag in the tag
.newsletter_text_section {
width: 40%;
float: left;
padding: 15px;
font-size:24px;
padding-right: 0 !important;
display: inline-block;
height: 100%;
vertical-align: middle;
}
.newsletter_text_section p {
font-size:24px !important;
display: inline-block;
vertical-align: middle;
}
<!-- newsletter section -->
<div class="newsletter_section">
<div class="newsletter_text_section">
<p>Join Balance and get 20% off your first order</p>
</div>
<div class="newsletter_gif_section">
...
</div>
<div class="newsletter_input_section">
...
</div>
</div>
To solve this, the faster way is to set the same pixel for height and line-height of the element. Like this:
.box{
height : 10vh;
line-height: 10vh
}
Otherwise, you can also display: flex to layout your page, in flex scope, you can use align-item to align element vertically like this :
.box {
display: flex;
align-items: center;
justify-content: center;
}
For more detailed information, you can refer to here.
The next method is to adjust padding to your parent element since you are using the percent unit, but I don't recommend this way due to it exist side-effect sometimes.
The above content is what I think so now, hope it can help you.
Add This To The Style Of The Element:
position: absolute;
top: 50%;
Thanks,
Kamesta
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.
I have been searching for an answer for this for days now and no solution seems to be the correct one for my needs. Please help!
I have two divs for which I want to fill 100% width of the browser, and have more of these which will stack to fill the height. I want the text in each of these (which is being generated from javascript ) to be vertically aligned.
I have also tried using display:table-cell and it works great in all ways, however I do not have the ability to set the cell width as a fixed %, and I need to add html markup which seems to limit me in using certain media queries later on.
How can I vertically align text using inline-block?
Im having trouble making a fiddle but this is close: http://jsfiddle.net/z4bj14op/
Here is my CSS
html, body {
margin: 0;
padding: 0;
height: 100%;
overflow-y: hidden;
font-family: helvetica;
}
#status {
width: 100%;
font-size: 0;
}
#line0, #status0 {
display: inline-block;
width: 50%;
vertical-align: middle;
height: 10%;
}
h2 {
font-size: 18px;
}
#line0 {
background-color: #B36305;
color: white;
}
#status0 {
background-color: black;
color: white;
}
And the HTML
<div id ="status">
<div id="line0"></div>
<div id="status0"></div>
</div>
There is an article from Steven Bradley 6 Methods For Vertical Centering With CSS: http://www.vanseodesign.com/css/vertical-centering/
Which solution would be the best depends on your requirements. I think the Absolute Positioning and Negative Margin way could be the solution you need, as your container have a defined height.
When using display:inline-block;vertical-align:middle the element is only vertically centered to the other inline-elements of the current row.
is this what you want ?
JSfiddle Example
If you want both of the divs to be 100% in their width that impossible ! otherwise the rest of the div will hidden by the other one
clarify more what's needed ..
<div id ="status">
<div id="line0"><h2>Bakerloo</h2></div>
<div id="status0"><h2>Good Service</h2></div>
</div>
css code:
#line0{
background:pink;
width:50%;
display: inline-block;
}
#status0{
background:red;
width:49%;
display: inline-block;
}
Why are you using display: inline-block? must you use this way? try to put float: left instead display: inline-block inside block #line0,#status0 and after you can work with text-something else
You Can try this
#line0{
background:pink;
width:50%;
display: inline-block;
float:left;/*added*/
}
#status0{
background:red;
width:50%;
display: inline-block;
}
DEMO
I am practising with making a webpage responsive for mobile screen resolutions. I succeeded with the width. How do I manage this with height? My wrappers continues to stay on top instead of vertical align.
I've seen a lot of questions about this problem, but couldn't find a solution specified on my css yet. Hope someone can help me out.
HTML
<body>
<div class="wrapper">
<div class="header">
</div>
<div class="content">
<div id="topleftbox"></div>
<div id="toprightbox"></div>
<div id="bottomleftbox"></div>
<div id="bottomrightbox"></div>
</div>
</div>
CSS
body {
}
.wrapper {
margin: 0 auto;
width: 100%;
height: 100%;
}
.header {
min-width: 50%;
height: 20px;
}
.content {
min-width: 500px;
width: 40%;
height: auto;
margin: 0 auto;
}
#topleftbox {
background: url(..);
background-repeat: no-repeat;
width: 229px;
height: 228px;
float: left;
}
#toprightbox {
background: url(...);
background-repeat: no-repeat;
width: 229px;
height: 228px;
float: right;
}
etc.
To use display:table-cell; you need to simulate the full table structure. Luckily you won't have to add any extra markup since you can style against the html and body tags:
html{display:table;width:100%;height:100%;}
body{display:table-row;}
.wrapper{
display:table-cell;
vertical-align:middle;
text-align:center;
}
Note: this vertically centers .wrapper's content, not the div itself.
You could use display:table to render your DIVs like tables and table cells.
More here: http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
Unlike with centering horizontally there never has been a CSS way to center vertically. The only way is to use javascript to grab the "window.innerHeight" then add the height of the HTML element (wrapper) to it and divide the total in half. And set that as the new top position.
Also your "wrapper" has a height of 100% this should mean it fills the entire screen height. It will not center if it is the same height as the screen. Also it has a width of 100%, I doubt the "margin: 0 auto" is doing anything.
Vertical align within CSS has a few options:
1. Via table-cell. (This does work in IE8+)
{
display:table-cell;
vertical-align:middle;
}
2. line-height = height of element (If you have more than one line of text this will look funky I imagine)
{
height:10em;
line-height:10em;
}
There are more options you can find, but I believe display: table should be your best bet nowadays.
http://www.zann-marketing.com/.../vertically-centering-text-using-css.html
https://stackoverflow.com/questions/2939914/
I need help with a recurring problem that happens a lot. I want to create a header that consists of 3 sections which are positioned inline. I display them inline using the following css code: display: inline & float: leftThe problem is that when I resize my browser window the last div is pushed down and isn't displayed inline. I know it sounds like I'm being picky, but I don't want the design to distort as the visitor change's the monitor screen. I have provided the html and css code below that I am working with below. Hopefully I have explained this well enough. Thanks in advance.
HTML
<div class="masthead-wrapper">
</div>
<div class="searchbar-wrapper">
</div>
<div class="profile-menu-wrapper">
</div>
CSS
#Header {
display: block;
width: 100%;
height: 80px;
background: #C0C0C0;
}
.masthead-wrapper {
display: inline;
float: left;
width: 200px;
height: 80px;
background: #3b5998;
}
.searchbar-wrapper {
display: inline;
float: left;
width: 560px;
height: 80px;
background: #FF0000;
}
.profile-menu-wrapper {
display: inline;
float: left;
width: 200px;
height: 80px;
background: #00FF00;
}
display them inline using the following css code: display: inline & float: left
Aside... You are actually floating the element, not displaying it inline. The display:inline rule is irrelevant here since floated elements are implicitly displayed as block.
But anyway, your problem is that your sections are all of a fixed width (200 + 560 + 200 = 960px), so when the browser window reduces to near this width (960px plus a bit more for your page margins) the design is going to break - your containers wrap.
If you still want these containers to be fixed width and to simply be cropped on a smaller browser window then you could perhaps add overflow:hidden to your #Header. At least then it won't push the #Header height down beyond 80px (which is a problem you seem to be experiencing). But content will be hidden on the smaller screen.
Or, make all your column containers dynamic and give them percentage widths, so that they flex with the available width. eg. 20%, 60% and 20% respectively. Although this might make the widths too small or too large at some window sizes. You could add a min-width and max-width (with an absolute amount) to limit this. But at narrow widths height:80px is not going to be enough, so min-height:80px would perhaps be more appropriate, if your design allows for your #Header to be flexible?
With the percentage, be sure to no have padding on your columns. The padding will be add some width. For your header, you can use the position:fixed, and for IE6 and 7 use position: absolute ( the position :fixed ) doesn't work for them.
For the columns, you can add the clearfix method who can help you for placing without problem the rest of the content.
Your HTML can be something like this :
<div id="header" class="clearfix">
<div id="col01">Column 01</div>
<div id="col02">Column 02</div>
<div id="col03">Colunm 03</div>
</div>
And the CSS :
#header {
position: fixed;
height:80px;
width:100%;
}
#col01,
#col02,
#col03 {
float:left;
}
#col01,
#col03 {
width:20%;
}
#col02 {
width:60%;
}
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
Hope it's helping you :-)