I have been using display: table for my html along with display: table-cell for my body lately, to make all of the contents of my page appear at the very center of the screen. While, this works with paragraphs, headings, inputs and labels etc.(as far as I have tested at least), it doesn't seem to work with div elements.
Is there any way to make this work for div elements like it does for the other ones? Pure CSS solution would be best.
Example (also on Codepen)
html {
display: table;
height: 100%;
width: 100%;
text-align: center;
}
body {
display: table-cell;
vertical-align: middle;
}
.hidden {
display: none;
}
.leaf {
border-radius: 15px 2px 15px 2px;
border: 1px solid green;
background-color: green;
width: 250px;
height: 80px;
}
<div class="leaf">Why am I not centered?</div>
<p>And why am I centered?</p>
Just add margin: 0 auto;.. Working right.
html {
display: table;
height: 100%;
width: 100%;
text-align: center;
}
body {
display: table-cell;
vertical-align: middle;
}
.hidden {
display: none;
}
.leaf {
border-radius: 15px 2px 15px 2px;
border: 1px solid green;
background-color: green;
width: 250px;
height: 80px;
margin:0 auto;
}
<div class="leaf">Why am I not centered?</div>
<p>And why am I centered?</p>
Just add margin: 0 auto; to .leaf class.
html {
display: table;
height: 100%;
width: 100%;
text-align: center;
}
body {
display: table-cell;
vertical-align: middle;
}
.hidden {
display: none;
}
.leaf {
margin: 0 auto;
border-radius: 15px 2px 15px 2px;
border: 1px solid green;
background-color: green;
width: 250px;
height: 80px;
}
<div class="leaf">Why am I not centered?</div>
<p>And why am I centered?</p>
Related
I applied display: block to my other divs but my image is displayed in front. I thought display: block would force a line break. Why is my image in front?
https://codepen.io/El_Escandalo/pen/PoPzXPZ?editors=1100
That's because your .container div is limited to height: 200px;. Erase that to allow its height to adjust to the contents, and your image container will be below it.
You've got an extra closed after container C.
* {
padding: 0;
margin: 0;
}
.container {
height: 200px;
text-align: center;
padding: none;
}
.a {
height: 100px;
width: 33%;
background: red;
display: block;
padding: none;
border: 10px solid purple;
box-sizing: border-box;
}
.b {
height: 100px;
width: 33%;
background: green;
display: block;
padding: none;
border: 10px solid purple;
box-sizing: border-box;
}
.c {
height: 100px;
width: 33%;
background: blue;
display: block;
padding: none;
border: 10px solid purple;
box-sizing: border-box;
}
.d {
border: 25px solid pink;
margin: 0 auto;
width: 75vw;
height: auto;
text-align: center;
}
.d img {
width: 100%;
}
<div class="container">
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="img-cont">
<div class="d">
<img src="https://cdn.pixabay.com/photo/2020/03/26/10/51/norway-4970019_1280.jpg" alt="view">
</div>
</div>
Can anyone explain me what I am doing wrong in this example? I am trying to create div which has lines on both sides.
.bottom-logo {
width: 50px;
height: 50px;
border-radius: 100%;
background-color: orange;
margin: 0 auto;
position: relative;
}
.bottom-logo::before {
content: "";
margin-right: 50px;
margin-top: 20px;
border-bottom: 4px solid black;
display: inline-block;
width: 100px;
float: right;
}
.bottom-logo::after {
content: "";
display: inline-block;
border-bottom: 4px solid black;
width: 100px;
margin-left: 50px;
}
<div class="bottom-logo"></div>
I would suggest to use absolute position for the pseudo elements. Also updated to use percentage values to make it more flexible.
.bottom-logo {
width: 50px;
height: 50px;
border-radius: 100%;
background-color: orange;
margin: 0 auto;
position: relative;
}
.bottom-logo::before,
.bottom-logo::after {
content: "";
border-bottom: 4px solid black;
width: 100px;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.bottom-logo::before {
right: 100%;
}
.bottom-logo::after {
left: 100%;
}
<div class="bottom-logo"></div>
Or, you can add a <span> tag then use inline block with vertical align.
.bottom-logo {
text-align: center;
}
.bottom-logo span {
display: inline-block;
vertical-align: middle;
width: 50px;
height: 50px;
border-radius: 100%;
background-color: orange;
}
.bottom-logo::before,
.bottom-logo::after {
display: inline-block;
vertical-align: middle;
content: "";
border-bottom: 4px solid black;
width: 100px;
}
<div class="bottom-logo"><span></span></div>
Another way is to use flexbox with a <span> tag or so.
.bottom-logo {
display: flex;
justify-content: center;
align-items: center;
}
.bottom-logo span {
width: 50px;
height: 50px;
border-radius: 100%;
background-color: orange;
}
.bottom-logo::before,
.bottom-logo::after {
content: "";
border-bottom: 4px solid black;
width: 100px;
}
<div class="bottom-logo"><span></span></div>
Please add float:left;
.bottom-logo::after {
content: "";
display: inline-block;
border-bottom: 4px solid black;
width:100px;
margin-left:50px;
float:left;
}
How To Add Bottom Border When Overflow Is Hidden?
I'm using the margin-bottom: -10000px; padding-bottom: 10000px; trick/hack to have divs fill their parent container while keeping everything % based. The only problem, the overflow hides the bottom border.
jsFiddle
http://jsfiddle.net/CSS_Apprentice/0Lkxw1je/1/
I'm trying to use :after to add the bottom border, but no matter what I do to the :after selector (position: absolute, overflow: visible), I can't get the border to show
body {
width: 100%
}
.container {
margin: 0 auto;
text-align: center;
overflow: hidden;
}
.box {
display: inline-block;
width: 25%;
height: 100%;
border: 3px solid black;
padding: 2%;
vertical-align: top;
margin-bottom: -10000px;
padding-bottom: 10000px;
}
.box:after {
border-bottom: 3px solid black;
content: '';
}
Try This updated css, with display: table; & display:table-row:-
body {
width: 100%;
display: table;
}
.container {
margin: 0 auto;
text-align: center;
overflow: hidden;
display: table-row;
}
.box {
display: inline-block;
width: 25%;
height: 100%;
border: 3px solid black;
padding: 2%;
vertical-align: top;
display: table-cell;
}
.box:after {
border-bottom: 3px solid black;
content: '';
}
.remainder {
height: 100%;
}
h1 {
background-color: #fff;
border: 3px solid black;
}
/* Colors */
.blue {
background-color: blue;
}
.green{
background-color: green;
}
.yellow{
background-color: yellow;
}
.red{
background-color: red;
}
What worked for me was to create an outer div with a border and without overflow:hidden. The outer box will have the border and the content of the inner will be overflow.
CODE:
.company-logo-wrap{
display: block;
background: #fff;
margin-left: -15px;
padding: 10px;
border: 1px solid #a5a5a5;
text-align: center;
height: 400px;
}
Tried inline block, float etc, couldn't get it work..
I cannot use padding / margin as it's user upload img, so the size is not always the same.
FIDDLE
You can use vertical-align: middle property, which will work only with display: table-cell/table
.company-logo-wrap{
display: table-cell;
background: #fff;
margin-left: -15px;
padding: 10px;
border: 1px solid #a5a5a5;
text-align: center;
height: 400px;
vertical-align: middle;
}
JSFiddle
Use display:table and table-cell
.company-logo-wrap{
display:table;
background: #fff;
margin-left: -15px;
border: 1px solid red;
text-align: center;
height: 400px;
width:100%
}
.company-logo-inner{
display:table-cell;
vertical-align:middle;
background:grey
}
DEMO
Use following Css
.company-logo-wrap{
display: table;
background: #fff;
margin-left: -15px;
padding: 10px;
border: 1px solid #a5a5a5;
text-align: center;
height: 400px;
width:100%
}
.company-logo-inner {
display: table-cell;
vertical-align: middle;
}
HTML
<div class="main">
<div class="box"></div>
</div>
CSS
.main{ height:500px; border:1px red solid;position:relative}
.box{width:40px; height:40px; background:red; }
/* for centering */
.box{ display: inline-block; }
.main{ text-align: center; }
.main:after{ content: ""; display: inline-block; height: 100%; vertical-align: middle; }
Check this http://jsfiddle.net/SxxWV/11/
I'm about to make a website but I'm getting stuck on the css. For some reason, there's a space between the video slideshow and the side bar. Can anyone tell me why this is?
Below is a picture of what my web browser displays when given the code.
<html>
<head>
<link href="stylesheet.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id='header'>
<p>Header</p>
</div>
<div id='picture_gallery'>
<p>Picture Gallery</p>
</div>
<div id='nav_bar'>
<p>Nav Bar</p>
</div>
<div id='vision_statement'>
<p>Vision Statement</p>
</div>
<div id='video_slideshow'>
<p>Video Slideshow</p>
</div>
<div id='sidebar'>
<p>Side Bar</p>
</div>
<div id='footer'>
<p>Footer</p>
</div>
</body>
#header {
border: 1px solid black;
height: 50px;
width: auto;
text-align: center;
}
#picture_gallery {
border: 1px solid black;
height: 50px;
width: auto;
text-align: center;
}
#nav_bar {
border: 1px solid black;
height: 50px;
width: auto;
text-align: center;
}
#vision_statement {
border: 1px solid black;
display: inline-block;
float: left;
height: 50px;
width: 33%;
text-align: center;
}
#video_slideshow {
border: 1px solid black;
display: inline-block;
height: 50px;
width: 33%;
text-align: center;
}
#sidebar {
border: 1px solid black;
display: inline-block;
float: right;
height: 50px;
width: 33%;
text-align: center;
}
#footer {
border: 1px solid black;
height: 50px;
width: auto;
text-align: center;
}
Change some in your css Define box-sizing:border-box;
as like this
#sidebar, #vision_statement, #video_slideshow{
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
#header {
border: 1px solid black;
height: 50px;
width: auto;
text-align: center;
}
#picture_gallery {
border: 1px solid black;
height: 50px;
width: auto;
text-align: center;
}
#nav_bar {
border: 1px solid black;
height: 50px;
width: auto;
text-align: center;
}
#vision_statement {
border: 1px solid black;
display: inline-block;
float: left; // add this float:left
height: 50px;
width: 33%;
text-align: center;
}
#video_slideshow {
border: 1px solid black;
display: inline-block;
height: 50px;float: left; // add float:left
width: 33%;
text-align: center;
}
#sidebar {
border: 1px solid black;
display: inline-block;
float: right;
height: 50px;
width: 34%; // add width :34%
text-align: center;
}
#footer {
border: 1px solid black;
height: 50px;
width: auto;
text-align: center;
clear:both; // add this clear both;
}
Demo
Its working fine now.. Jus set the position:absolute to your sidebar style..
Here is the updated code for css:
#sidebar {
border: 1px solid black;
display: inline-block;
position:absolute;
height: 50px;
width: 32%;
text-align: center;
}
Demo
You need to set the widths of the elements as 33.3333% or something similar, because 33% on each leaves a gap of 1%.
The issue you are having with them not fitting with that width is because of the 1px border you have set. With the traditional box model, a border is not contained within the 33.33% width, so it means the actual width is 33.33% + 1px.
To fix this, you can use the border-box box model. I use it all the time -- works much better.
Read here as to why and what it does:
http://www.paulirish.com/2012/box-sizing-border-box-ftw/
Simply add:
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
to your css file. Then change the widths of the three elements to
width:33.33%;
This will make all of the boxes exactly the same width and have them all fit on the same line.