How would I go about centering a pseudo-element on an element with display: table-cell? My attempts have just centered it to the parent element with display: table.
its hard to figure out what you are trying to do when you don't provied any code, is it something like this you are trying to do? just paste this to an html document
<style>
#table-container {
display: table;
padding: 5px;
}
.tr {
display: table-row;
padding: 10px;
}
.td {
display: table-cell;
padding: 10px;
width: 100px;
border: #000000 solid 1px;
margin: 10px;
}
</style>
<div id="container">
<div class="tr">
<div class="td"></div>
<div class="td"></div>
<div class="td"></div>
</div>
<div class="tr">
<div class="td"></div>
<div class="td"></div>
<div class="td"></div>
</div>
</div>
To get a pseudo element to pick up values such as its dimensions and positioning from its 'owning' element you have to set their positions.
If the position of the owning element is not set then the system will search 'back up' the document until it finds an ancestor with position set and things will be set up in relation to that.
In this snippet as a demo the pseudo element is positioned absolutely and the table-cell itself positioned relative.
.parent {
width: 20vmin;
height: 20vmin;
background: cyan;
display: table;
}
.child {
display: table-cell;
position: relative;
background: yellow;
}
.child::after {
content: '';
width: 50%;
height: 50%;
background-color: pink;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div class="parent">
<div class="child"></div>
</div>
I solved it. The trick was to put a container in each cell that handled centering the element and thus its pseudo-element.
Related
I want to make this:
stacked cards
the html would look like so:
<div class="container>
<div class="top-card>
<div class="card-content">
...
</div>
</div>
<div class="bottom-card>
</div>
</div>
I am having trouble styling this so that the height of the entire card adjusts automatically according to the content inside the top card. Thank you in advance.
you can use a combination of box-shadow and display: inline-block to accomplish what you are trying to do. I have updated the answer. Here is the code:
.grandparent {
display: inline-block;
position: relative;
}
.parent {
display: inline-block;
background: blue;
position: absolute;
top: 0;
left: 0;
}
.child {
width: 100px;
height: 100px;
background: red;
margin: 5px;
}
.shadow {
margin-left: -7px;
margin-top: -7px;
background: pink;
z-index: -100;
border: 1px solid green;
}
.empty {
opacity: 0;
}
<div class="grandparent">
<div class="parent">
<div class="child"></div>
</div>
<div class="parent shadow">
<div class="child empty"></div>
</div>
</div>
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>
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 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;
}
Here is an example
http://jsfiddle.net/BringMeAnother/LwXhE/
// html
<div class="container clearfix">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
// css
.container {
background: red;
padding: 10px;
}
.child {
width: 100px;
height: 100px;
float: left;
}
.child:nth-child(even) {
background: green;
}
.child:nth-child(odd) {
background: blue;
}
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
The container with the red background seem to always stretch to 100%. What I'd like to do is to make its width depend on the floating children, so in this case, 3 times 100px.
The reason I'd like to have this is as follow. In a flexible layout, I have a container that contains several child elements of different sizes. The width and amount of those children can vary. The children always float. The goal is to have the floating children centered. So, if I always have one child element, I'd simply set its margin-right and margin-left to auto. However, there are several children which I wish to put next to each other, but after they have been ordered horizontally, I'd like that row to be centered on the page. I cannot give a fixed width to the container since the amount of children and each of their width are not determined in advance.
I think I might be able to do this with javascript, but I wonder if there is a pure css solution. Thanks
Besides Adsy suggestion (to set the container's position to fixed), you could:
1) Use position absolute on the container:
HTML:
<div class="container">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
CSS:
.container {
background: red;
padding: 10px;
position:absolute;
}
.child {
width: 100px;
height: 100px;
float: left;
}
.child:nth-child(even) {
background: green;
}
.child:nth-child(odd) {
background: blue;
}
http://jsfiddle.net/tKz8b/
2) Set a float on the container, which is good if you need it with relative / static positioning:
HTML:
<div class="container">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
<div class="clearfix"></div>
<div>Next</div>
CSS:
.container {
background: red;
padding: 10px;
float: left;
}
.child {
width: 100px;
height: 100px;
float: left;
}
.child:nth-child(even) {
background: green;
}
.child:nth-child(odd) {
background: blue;
}
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
http://jsfiddle.net/LYrWx/1/
By wrapping your container div in another wrapper div, you can centre your red container div, and the red div will only be as wide as its floating children.
HTML
<div class="centered">
<div class="container">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
</div>
CSS
.centered {
text-align: center;
}
.container {
background: red;
padding: 10px;
display: inline-block;
}
.child {
width: 100px;
height: 100px;
float: left;
}
.child:nth-child(even) {
background: green;
}
.child:nth-child(odd) {
background: blue;
}
Fiddle: http://jsfiddle.net/SbPRg/
Late to the party here, but all you really need is to add display: inline-block. And to center the .container div, just apply text-align: center to whatever contains it.
JSFiddle: http://jsfiddle.net/LwXhE/24/
Add position:fixed; to container
.container {
background: red;
padding: 10px;
position:fixed;
Fiddle