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/
Related
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>
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.
I'm trying to center divs using these code but it's just centering vertical.
I want them horizontal.
HTML
<div class='test'>
<div class='test1'>
<img class='gamespic' src='img/{$row['pictures']}'></div>
</div>
CSS
.test{
width: 100%;
text-align: center;
}
.test1 {
width: 220px;
height: 300px;
border: solid 2px #000;
content: '';
display: inline-block;
vertical-align: middle;
margin-right: 0.5em;
margin-top: 0.5em;
margin-bottom: 0.5em;
position:relative;
}
change your CSS like this, I have also added full page coverage just in case (but you can remove it)
.test {
width: 100%;
height:100%;
text-align: center;
top:0;
left:0;
right:0;
bottom:0;
background:#fc0;
position:absolute;
}
.test1 {
width: 220px;
height: 300px;
border: solid 2px #000;
content:'';
display: inline-block;
vertical-align: middle;
margin-right: 0.5em;
margin-top: 0.5em;
margin-bottom: 0.5em;
position:absolute;
top:50%;
left:50%;
margin-top:-150px;
margin-left:-110px;
}
See bootply here
how can I get the input aligned with the div #submitKeyword ?
FIDDLE
HTML:
<div class="searchKeywords">
<input id="inputKeyword" type="text" name="keywords" placeholder="What are you looking for?">
<div id="submitKeyword"></div>
</div>
CSS:
.searchKeywords {
height: 100%;
width: 100%;
margin-top: 70px;
text-align: center;
}
.searchKeywords #inputKeyword {
display: inline-block;
height: 45px;
width: 150px;
border: 2px solid;
}
.searchKeywords #submitKeyword {
display: inline-block;
width: 115px;
height: 45px;
border: 1px solid #000;
background-image: url('/www/assets/newImages/gallery/Lupa.png');
background-repeat: no-repeat;
background-position: center;
}
Use vertical-align: middle;
.searchKeywords {
display: inline-block;
height: 100%;
width: 100%;
margin-top: 70px;
text-align: center;
vertical-align: middle;
}
.searchKeywords #inputKeyword {
height: 45px;
width: 150px;
border: 2px solid;
}
.searchKeywords #submitKeyword {
display: inline-block;
width: 115px;
height: 45px;
border: 1px solid #000;
background-image: url('/www/assets/newImages/gallery/Lupa.png');
background-repeat: no-repeat;
background-position: center;
vertical-align: middle;
}
Check this link http://jsfiddle.net/amoljawale/B45P5/1/
I suggest to go with display:table. Also use margin: auto instead of text-align:center to align your elements in the middle.
css
.searchKeywords {
height: 100%;
display: table;
margin: auto;
position: relative;
top: 70px;
}
.searchKeywords #inputKeyword {
display: table-cell;
height: 45px;
width: 150px;
border: 2px solid;
}
.searchKeywords #submitKeyword {
display: table-cell;
width: 115px;
height: 45px;
border: 1px solid #000;
background-image: url('/www/assets/newImages/gallery/Lupa.png');
background-repeat: no-repeat;
background-position: center;
}
fiddle
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.