Here is a content inside: <div class="traki"> </div>
I add following css:
.traki {margin-left: auto !important;
margin-right: auto !important;}
}
And goal is to set inside content center. but it doesn't apply, demo: http://buhehe.de/kalender-2018/
You cannot do an "auto" margin to vertically center an element.
There is a workaround though, you could try this:
.container {
display: table;
height: 100%;
position: absolute;
overflow: hidden;
width: 100%;
}
.helper {
#position: absolute;
#top: 50%;
display: table-cell;
vertical-align: middle;
}
.content {
#position: relative;
#top: -50%;
margin: 0 auto;
width: 200px;
border: 1px solid orange;
}
<div class="container">
<div class="helper">
<div class="content">
<p>stuff</p>
</div>
</div>
</div
Related
I have to fix this layout, which is a messy combination of flexbox, table layout and absolute positioning.
While it's working normal on Chrome, FF and Safari, the output screen on IE11 is strange.
In my code, I want the span to be at the bottom-right of each square, but on IE11, it appears on top-right instead.
Can anyone please help me to fix this problem? The constraint here is that the flexbox .container and the table system must be maintained. I want to fix only the span element. Thanks in advance!
.container {
display: flex;
width: 400px;
}
.inner {
width: 50%;
}
.table {
display: table;
width: 100%;
border: 1px solid;
}
.table:before {
content: '';
display: table-cell;
width: 0;
padding-bottom: 100%;
}
.cell {
display: table-cell;
vertical-align: bottom;
position: relative;
padding: 20px;
}
.cell span {
position: absolute;
bottom: 20px;
right: 20px;
}
<div class="container">
<div class="inner">
<div class="table">
<div class="cell">
Yeah?
<span>Yo!</span>
</div>
</div>
</div>
<div class="inner">
<div class="table">
<div class="cell">
Yeah?
<span>Yo!</span>
</div>
</div>
</div>
</div>
remove your .cell span block and
use below code instead of that.
i have checked its working in every browser.
.cell span {
float: right;
}
One thing you can do to fix it in IE11 is to wrap your cell contents into a block container and then add position: relative to it. Now you can adjust the position with right: 0px - see demo below:
.container {
display: flex;
width: 400px;
}
.inner {
width: 50%;
}
.table {
display: table;
width: 100%;
border: 1px solid;
}
.table:before {
content: '';
display: table-cell;
width: 0;
padding-bottom: 100%;
}
.cell {
display: table-cell;
vertical-align: bottom;
position: relative;
padding: 20px;
}
.cell span {
position: absolute;
/*bottom: 20px;
right: 20px;*/
right: 0px; /* ADDED */
}
.cell div { /* ADDED */
position: relative;
}
<div class="container">
<div class="inner">
<div class="table">
<div class="cell">
<div>Yeah?
<span>Yo!</span></div>
</div>
</div>
</div>
<div class="inner">
<div class="table">
<div class="cell">
<div>Yeah?
<span>Yo!</span></div>
</div>
</div>
</div>
</div>
Current Situation
Using the following code I show a couple of divs floated to the left.
* {
margin: 0;
padding: 0;
border: none;
box-sizing: border-box;
}
.container {
width: 100%;
height: 100%;
}
.header {
height: 80px;
position: fixed;
width: 100%;
background: green;
}
.inner-container {
position: absolute;
top: 80px;
left: 0px;
right: 0px;
bottom: 0px;
overflow: auto;
white-space: nowrap;
}
.column {
height: 500px;
width: 150px;
background: red;
float: left;
margin: 5px;
}
<div class="container">
<div class="header">
</div>
<div class="inner-container">
<div class="column">
</div>
<div class="column">
</div>
<div class="column">
</div>
</div>
</div>
Current result:
Problem
What I want is that the red boxes don't wrap within its container. I want both, a vertical and horizontal scroll bar if the space is not enough. For the vertical scrollbar it works. What am I missing?
JSFiddle: https://jsfiddle.net/brainchest/j6zh400v/
A fix I found was to change the .column from being a float: left to display: inline-block. This treats each column as a "word" (like a word in text) and thus the white-space: no-wrap; applies. Otherwise, the float: left changes the way the element gets positioned.
Edited Fiddle: https://jsfiddle.net/9bo4f5pv/
Use display: flex on the parent, then flex: 0 0 150px on the columns.
* {
margin: 0;
padding: 0;
border: none;
box-sizing: border-box;
}
.container {
width: 100%;
height: 100%;
}
.header {
height: 80px;
position: fixed;
width: 100%;
background: green;
}
.inner-container {
position: absolute;
top: 80px;
left: 0px;
right: 0px;
bottom: 0px;
overflow: auto;
display: flex;
}
.column {
height: 500px;
flex: 0 0 150px;
background: red;
margin: 5px;
}
<div class="container">
<div class="header">
</div>
<div class="inner-container">
<div class="column">
</div>
<div class="column">
</div>
<div class="column">
</div>
</div>
</div>
Is there any way to make object-fit work with min-height?
See this jsfiddle for example.
If I set a fixed height, it works, but if I set a min-height, it doesn't work.
HTML:
<div class="container">
<div class="b_feat_img">
<img src="http://i.imgur.com/iEJWyXN.jpg">
</div>
</div>
CSS:
.container {
width:120px;
}
.b_feat_img {
border: 1px solid green;
background: red;
float: left;
height: auto;
min-height:130px;
margin-bottom: 10px;
overflow: hidden;
width: 100%;
}
.b_feat_img img {
object-fit: cover;
height: 100%;
width: 100%;
}
The min-height needs to set on the img element, not the container.
In additional, you can also set vertical-align:top or display:block on the img to get rid of the unwanted whitespace below it.
.container {
width:120px;
}
.b_feat_img {
border: 1px solid green;
background: red;
float: left;
height: auto;
margin-bottom: 10px;
overflow: hidden;
width: 100%;
}
.b_feat_img img {
object-fit: cover;
min-height: 130px;
width: 100%;
vertical-align: top;
}
<div class="container">
<div class="b_feat_img">
<img src="http://i.imgur.com/iEJWyXN.jpg">
</div>
</div>
You can use position: absolute to the img in css.
So it will be like:
HTML:
<div class="container">
<div class="b_feat_img">
<img src="http://i.imgur.com/iEJWyXN.jpg">
</div>
</div>
CSS:
.container {
width:120px;
}
.b_feat_img {
position: relative;
border: 1px solid green;
background: red;
float: left;
width: 100%;
min-height:130px;
margin-bottom: 10px;
overflow: hidden;
}
.b_feat_img img {
position: absolute;
height: 100%;
width: auto;
}
fiddle:
https://jsfiddle.net/b93txe6t/1/
Hope that helps.
I have this problem. I need that the yellow div adapts to the contained image; its width is dynamic, so I can't use a fixed width.
I can't find a solution anywhere, and I've tried with margin: 0; display:block; but nothing.
Here is the code:
HTML
<div class="columna" style="max-width: 100%;">
<div class="s_container seleccion_simple_default">
<div id="text_opcion">
<div class="ti-ab-d" style="display: table-cell;">
<label for="test" ><p>Prueba</p></label>
</div>
</div>
<div class="ssm_opcion img_opcion">
<img src="images/opciones/mcdonalds.png">
</div>
</div>
</div>
CSS
.s_container{
margin: auto;
width: 100%;
height: 100%;
border-spacing: 0px;
overflow: hidden;
border: none;
position: inherit;
display: table;
}
.ssm_opcion{
width: 1px;
max-width: 100%;
overflow: hidden;
display: table-cell;
vertical-align: middle;
background:yellow;
}
.img_opcion{
display:;
width: auto;
max-width: 100%;
}
.ssm_opcion img{
width: auto;
max-width: 100%;
height: auto;
vertical-align: middle;
}
#text_opcion{
width: 100%;
height:100%;
min-width: 50px;
text-align: left;
display: table;
float: left;
background:green;
}
.ti-ab-d{
vertical-align: bottom;
text-align: right;
}
.s_container {
margin: auto;
width: 100%;
height: 100%;
border-spacing: 0px;
overflow: hidden;
border: none;
position: inherit;
display: table;
}
.ssm_opcion {
width: 1px;
max-width: 100%;
overflow: hidden;
display: table-cell;
vertical-align: middle;
background: yellow;
}
.img_opcion {
display: ;
width: auto;
max-width: 100%;
}
.ssm_opcion img {
width: auto;
max-width: 100%;
height: auto;
vertical-align: middle;
}
#text_opcion {
width: 100%;
height: 100%;
min-width: 50px;
text-align: left;
display: table;
float: left;
background: green;
}
.ti-ab-d {
vertical-align: bottom;
text-align: right;
}
<div class="columna" style="max-width: 100%;">
<div class="s_container seleccion_simple_default">
<div id="text_opcion">
<div class="ti-ab-d" style="display: table-cell;">
<label for="test">
<p>Prueba</p>
</div>
</div>
<div class="ssm_opcion img_opcion">
<img src="images/opciones/mcdonalds.png">
</div>
</div>
</div>
You have some conflicting CSS in the snippets you provide, I've modified the code to remove the .img_opcion CSS you had in there. Image autosizes to the container nicely.
https://jsfiddle.net/Lvv7Lxrs/1/
EDIT: the width declaration is just to prove the container snaps to size, as the default "broken image" browser stand-in is a bit small.
If you add a div and in the div you put a paragraph inside the div, if you give to div such rules css a background-color: #color, the div fits automatically to the paragraph, you don't must you do not have mandatory put a width-height fixed.
I am using some CSS classes to manipulate my validation summary. Currently, I only show the first error. I wish to align this error inside its div. However my vertical-align properties seem to be having no effect. I can see that they are applied when I inspect the element with firebug in Firefox, yet they don't render as vertically aligned (they sit at the top). The other elements of the classes render correctly.
My div
<div style ="float: left; max-width: 200px; height: 75px; vertical-align:middle">
#Html.ValidationSummary(false)
</div>
My CSS classes
.validation-summary-errors li {
color: #b94a48;
vertical-align: middle;
}
.validation-summary-errors ul li:nth-child(n+2) {
display: none;
}
JSfiddle: http://jsfiddle.net/9ejZz/1/
vertical-align only apply to cell elements such as <td> or elements that have the css rule display:table-cell
See this example : http://jsfiddle.net/V9by8/
You should provide a jsfiddle for your problem, I could help you center it
UPDATE
Updataed with your code http://jsfiddle.net/9ejZz/6/
Six methods for centering something vertically. Pick your poison. This question seriously comes up once a week...
http://www.vanseodesign.com/css/vertical-centering/
Line-height
<div id="parent">
<img src="image.png" alt="" />
</div>
#parent {
line-height: 200px;
}
#parent img {
vertical-align: middle;
}
Table
<div id="parent">
<div id="child">Content here</div>
</div>
#parent {display: table;}
#child {
display: table-cell;
vertical-align: middle;
}
Negative Margins
<div id="parent">
<div id="child">Content here</div>
</div>
#parent {position: relative;}
#child {
position: absolute;
top: 50%;
left: 50%;
height: 30%;
width: 50%;
margin: -15% 0 0 -25%;
}
Stretching
<div id="parent">
<div id="child">Content here</div>
</div>
#parent {position: relative;}
#child {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 50%;
height: 30%;
margin: auto;
}
Equal Padding
<div id="parent">
<div id="child">Content here</div>
</div>
#parent {
padding: 5% 0;
}
#child {
padding: 10% 0;
}
Floater Div
<div id="parent">
<div id="floater"></div>
<div id="child">Content here</div>
</div>
#parent {height: 250px;}
#floater {
float: left;
height: 50%;
width: 100%;
margin-bottom: -50px;
}
#child {
clear: both;
height: 100px;
}