I am trying to center 8 div's which are inside another div.
Here is my HTML code:
<div align="center" id="buttonBar">
<div class="menuButton">
Home
</div>
<div class="menuButton">
Author
</div>
<div class="menuButton">
Literature
</div>
<div class="menuButton">
Projects
</div>
<div class="menuButton">
Pictures
</div>
<div class="menuButton">
How To...
</div>
<div class="menuButton">
Updater
</div>
<div class="menuButton">
Copyright
</div>
</div>
And here is my CSS:
#buttonBar {
padding-left: 50px;
position: fixed;
width: 100%;
}
.menuButton {
height: 50px;
width: 125px;
background-color: lightblue;
display:inline-block;
text-align: center;
line-height: 50px;
margin-left: auto;
margin-right: auto;
}
.menuButtonText {
font-size: 25px;
text-align: center;
line-height: 50px;
color: black;
text-decoration: none;
}
#buttonBar {
padding-left: 50px;
position: fixed;
width: 100%;
}
.menuButton {
height: 50px;
width: 125px;
background-color: lightblue;
display: inline-block;
text-align: center;
line-height: 50px;
margin-left: auto;
margin-right: auto;
}
.menuButtonText {
font-size: 25px;
text-align: center;
line-height: 50px;
color: black;
text-decoration: none;
}
<div align="center" id="buttonBar">
<div class="menuButton">
Home
</div>
<div class="menuButton">
Author
</div>
<div class="menuButton">
Literature
</div>
<div class="menuButton">
Projects
</div>
<div class="menuButton">
Pictures
</div>
<div class="menuButton">
How To...
</div>
<div class="menuButton">
Updater
</div>
<div class="menuButton">
Copyright
</div>
</div>
The addition of the align:center and setting margin-left and margin-right to auto, did move my div's, but not in the center. It moved the div's more towards the right. Is there something I am doing wrong?
Try taking the padding-left: 50px out of #buttonBar.
#buttonBar {
padding-left: 50px;
position: fixed;
width: 100%;
}
should be
#buttonBar {
position: fixed;
width: 100%;
}
I think that is what was pushing it to the right.
For all divs
width: 100%;
margin-left: auto ;
margin-right: auto ;
http://www.thesitewizard.com/css/center-div-block.shtml
Related
I know this is a commonly answered question, but for some reason nothing I've tried has worked from the other Stackoverflow posts. I'm trying to have two sidebars on my website with one on each side of the main content.
I've tried using float right and float left. Block vs. inline-block etc... I'm not sure whether the the main contents should float or not. I'm using the latest google chrome browser.
HTML:
<!-- Main Page Contents -->
<div id="contents">
<div id="sidebar">
<div><p>link 1</p></div>
</div>
<div id="sidebar2">
<div><p>link 2</p></div>
</div>
<div id="mainContents">
<div class="center-div" style="width: 700px;">
<h1">This is some content</h1>
</div>
<div class="center-div" style="width: 900px;">
<h1>More content</h1>
</div>
</div>
</div>
CSS:
.center-div
{
margin: 0 auto;
padding: 15px;
background-color: red;
}
#contents {
overflow: auto;
margin: auto;
margin-bottom: 10px;
width: 100%;
}
#sidebar {
position: fixed;
float: left;
width: 200;
margin: 5px;
margin-left: 15px;
padding: 5px;
top: 46px;
margin-top: 20px;
}
#sidebar2 {
position: fixed;
float: right;
width: 50px;
margin: 5px;
padding: 5px;
top: 46px;
margin-top: 20px;
}
#mainContents {
float: right;
width: calc(100% - 300px);
margin: 0px;
padding: 5px;
padding-top: 20px;
}
Both the sidebars appear on the left side in the same position. The best I've gotten is the sidebar2 floats right of the sidebar and the contents float right of that.
You can do this using flexbox here is the working fiddle:
and also i have removed unnecessary css.
.center-div
{
margin: 0 auto;
padding: 15px;
background-color: red;
}
#contents {
overflow: auto;
margin: auto;
margin-bottom: 10px;
width: 100%;
display:flex;
}
#sidebar {
width: 20%;
margin: 5px;
padding: 5px;
margin-top: 20px;
}
#sidebar2 {
width: 20%;
padding: 5px;
margin-top: 20px;
}
#mainContents {
width: 60%;
margin: 0px;
padding-top: 20px;
}
<!-- Main Page Contents -->
<div id="contents">
<div id="sidebar">
<div><p>link 1</p></div>
</div>
<div id="mainContents">
<div class="center-div">
<h1>This is some content</h1>
</div>
<div class="center-div" >
<h1>More content</h1>
</div>
</div>
<div id="sidebar2">
<div><p>link 2</p></div>
</div>
</div>
Note: there is mistakes in html and css which i have corrected:
your code is almost correct just remove position:fixed and give proper width considering your screen as 100%
.center-div
{
margin: 0 auto;
padding: 15px;
background-color: red;
}
#contents {
overflow: auto;
margin: auto;
margin-bottom: 10px;
width: 100%;
}
#sidebar {
float: left;
width: 15%;
margin:1%;
padding: 5px;
margin-top: 20px;
}
#sidebar2 {
float:right;
width: 15%;
margin: 1%;
padding: 5px;
top: 46px;
margin-top: 20px;
}
#mainContents {
float: left;
width:59%;
margin: 0px;
padding: 5px;
padding-top: 20px;
}
<!-- Main Page Contents -->
<div id="contents">
<div id="sidebar">
<div><p>link 1</p></div>
</div>
<div id="mainContents">
<div class="center-div" >
<h1>This is some content</h1>
</div>
<div class="center-div" >
<h1>More content</h1>
</div>
</div>
<div id="sidebar2">
<div><p>link 2</p></div>
</div>
</div>
I want to center vertically text, when the elements height is unknown?
html
<div class="table">
<div class="table-resp">
<div class="second-row">
<div class="col-md-5">
<div class="left-col-text">
Center vertically
</div>
</div>
<div class="col-md-7">
<div class="right-col-text">
<div class="example">Ex1</div>
<div class="example">Ex2</div>
<div class="example">Ex3</div>
</div>
</div>
</div>
</div>
</div>
css
/* CSS used here will be applied after bootstrap.css */
.table{
text-align: center;
padding-top: 70px;
padding-left: 0px;
padding-right: 35px;
}
.table-resp{
border: 1px solid green;
overflow-x: hidden;
}
.text1{
float: left;
display: inline-block;
}
.second-row{
line-height: 30px;
clear: left;
min-height: 30px;
overflow: auto;
}
.left-col-text{
height: 100%;
}
Elements "Ex1, Ex2" count is unknown, so, if there are more of those, obviously, the table row will get bigger in height. I need some solution, that would be responsive to this also...
https://www.codeply.com/go/bp/4ZEUS7Q7lm
Just add row-ht-eq class to row <div class="second-row">
CSS:
.row-ht-eq {
display: flex;
align-items: center;
}
position: absolute;
top: 50%;
transform: translateY(-50%);
Also you can play with:
display: table-cell;
vertical-align: middle;
Note: Use span Element as helper.
Html:
<div class="col-md-5">
<span class="helper"></span>
<div class="left-col-text">
Center vertically
</div>
</div>
Css:
.helper {
display: inline-block;
height: 100%;
vertical-align: middle;
}
Full Code:
.table{
text-align: center;
padding-top: 70px;
padding-left: 0px;
padding-right: 35px;
}
.table-resp{
border: 1px solid green;
overflow-x: hidden;
}
.text1{
float: left;
display: inline-block;
}
.second-row{
line-height: 30px;
clear: left;
min-height: 30px;
overflow: auto;
}
.left-col-text{
height: 100%;
}
.helper {
display: inline-block;
height: 100%;
vertical-align: middle;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="table">
<div class="table-resp">
<div class="second-row">
<div class="col-md-5">
<span class="helper"></span>
<div class="left-col-text">
Center vertically
</div>
</div>
<div class="col-md-7">
<div class="right-col-text">
<div class="example">Ex1</div>
<div class="example">Ex2</div>
<div class="example">Ex3</div>
</div>
</div>
</div>
</div>
</div>
Change your text class to:
.left-col-text {
margin:0 auto;
}
This will automatically decide equal distance from top to bottom.
I'm doing front end development for a project between some friends.
He is building the backed in rails and has templates that will generate the products and put the content in but I'm running into a situation where I'm not sure how to make them align properly?
This is a web based platform.
Here is the situation with the products. I have three for example. I created a product container that will hold them. I have the first one showing perfectly, then when I copy pasted another two (just to see them) they don't generate.
<div class="main-bkg">
<div class="card-row">
<div class="product-cont">
<div class="product-holder">
<div class="product-img"> <img src="img/box.jpg"> </div>
<div class="product-name">prod1</div>
<div class="product-info">
<div class="product-price">$99</div>
<div class="sep">-</div>
<div class="product-desc">box</div>
</div>
<div class="product-qty">
<div class="qty-sub">-</div>
<div class="qty-amount">1</div>
<div class="qty-add">+</div>
</div>
</div>
</div>
<div class="product-cont">
<div class="product-holder">
<div class="product-img"> <img src="img/circle.jpg"> </div>
<div class="product-name">prod2</div>
<div class="product-info">
<div class="product-price">$99</div>
<div class="sep">-</div>
<div class="product-desc">circle</div>
</div>
<div class="product-qty">
<div class="qty-sub">-</div>
<div class="qty-amount">1</div>
<div class="qty-add">+</div>
</div>
</div>
</div>
<div class="product-cont">
<div class="product-holder">
<div class="product-img"> <img src="img/tri.jpg"> </div>
<div class="product-name">prod3</div>
<div class="product-info">
<div class="product-price">$99</div>
<div class="sep">-</div>
<div class="product-desc">triangle</div>
</div>
<div class="product-qty">
<div class="qty-sub">-</div>
<div class="qty-amount">1</div>
<div class="qty-add">+</div>
</div>
</div>
</div>
</div>
</div>
The css is build in SASS, and I'll post in that for easy reading. If you want the css export I can show it.
I assume they are overlapping. I'm not totally sure an easy work around this other then giving each product a special ID and then applying styling to it.
.main-bkg {
padding-top: 165px;
height: 100vh;
background-color: #ebf0f1;
.card-row {
padding-top: 15px;
padding-bottom: 15px;
.product-cont {
padding-left: 30px;
padding-right: 30px;
.product-holder {
background-color: white;
height: 350px;
width: 200px;
border-radius: 20x;
.product-img {
img {
display: block;
height: 240px;
width: 170px;
margin-left: auto;
margin-right: auto;
padding-top: 15px;
}
}
.product-name {
text-align: center;
}
.product-info {
display: block;
height: 30px;
width: 100px;
text-align: center;
margin-left: auto;
margin-right: auto;
font-weight: 700;
.product-price {
display: inline-block;
text-align: center;
float: left;
}
.sep {
display: inline-block;
text-align: center;
}
.product-desc {
display: inline-block;
text-align: center;
float: right;
}
}
.product-qty {
display: block;
border-radius: 3px;
border: 1px solid $prime-color;
margin-left: auto;
margin-right: auto;
width: 100px;
.qty-sub {
color: $prime-color;
display: inline-block;
float: left;
width: 30px;
height: 25px;
text-align: center;
}
.qty-amount {
display: inline-block;
color: $prime-color;
font-size: 20px;
text-align: center;
width: 40px;
height: 25px;
}
.qty-add {
color: $prime-color;
display: inline-block;
text-align: center;
float: right;
width: 30px;
height: 25px;
}
}
}
}
}
}
Have you tried to put a float:left in the container to let the container float?
.product-cont {
padding-left: 30px;
padding-right: 30px;
float: left;
}
Check if this Codepen with SASS ready solves your problem
I am trying to make a grid of pictures with padding in between inside the main_block div. I cant get the images to aline next to eachother and then break it with a becouse they go inline. inline block does not work. I tried making a new div for these images but i cant resize the pictures nor give them padding. I tried to make the pictures resizable but without results. iut is as if something is overriding the size of the pictures. The pictures stack upon eachother and im trying to maaake a grid.
Thanks in advance for any help!
This would be the optimal solution.
Here is the fiddle
https://jsfiddle.net/q2cr9ttL/1/
<style>
body {
margin: 0;
padding: 0;
}
#header {
background-color: #ff6600;
color: white;
text-align: left;
padding: 2px;
}
#nav {
line-height: 30px;
background-color: #fff000;
height: 350px;
width: 125px;
float: left;
padding: 5px;
}
#section {
width: 350px;
float: left;
padding: 10px;
}
#footer {
background-color: #737373;
color: white;
clear: both;
text-align: center;
}
#container {
margin: auto;
width: 900px;
text-align: left;
overflow: hidden;
}
.inner_block {
display: inline-block;
text-align: center;
width: 350px;
height: 200px;
}
.main_block {
text-align: center;
width: 750px;
}
.grid_block {
display: inline-block;
text-align: center;
width: 29%px;
height:100px;
}
</style>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="stylesheet.css" />
<body>
<div id="container">
<!---container--->
<div id="header">
<h1>JORDAS</h1>
</div>
<!--header-->
<div id="nav">
Etusivu
<br>
Teltat
<br>
Palvelut
<br>
Yhteistiedot
<br>
</div>
<div id="section">
<div class="main_block">
<div class="grid_block">
<img src=Grafik/basictalt.png>
</div>
<div class="grid_block">
<img src=Grafik/basictalt.png >
</div>
<div class="grid_block">
<img src=Grafik/basictalt.png>
</div>
</div><!--mainblock-->
</div>
<div id="footer">
<h3>POP-UP TELTTOJEN YKKÖNEN </h3>
</div>
<!--footer-->
</div>
<!--container-->
</body>
You could use the flex display property.
You will need to include some prefixes for cross browser compatibility.
* {
box-sizing: border-box;
}
.main_block {
display: flex;
flex-wrap: wrap;
}
.grid_block {
width: 33%;
padding: 1.4em
}
.grid_block img {
max-width: 100%
}
/* ORIGINAL STYLES */
body {
margin: 0;
padding: 0;
}
#header {
background-color: #ff6600;
color: white;
text-align: left;
padding: 2px;
}
#nav {
line-height: 30px;
background-color: #fff000;
height: 350px;
width: 125px;
float: left;
padding: 5px;
}
#section {
width: 350px;
float: left;
padding: 10px;
}
#footer {
background-color: #737373;
color: white;
clear: both;
text-align: center;
}
#container {
margin: auto;
width: 900px;
text-align: left;
overflow: hidden;
}
.inner_block {
display: inline-block;
text-align: center;
width: 350px;
height: 200px;
}
.main_block {
text-align: center;
width: 750px;
}
.grid_block {
display: inline-block;
text-align: center;
width: 29%px;
height: 100px;
}
<div id="container">
<!---container--->
<div id="header">
<h1>JORDAS</h1>
</div>
<!--header-->
<div id="nav">
Etusivu
<br>
Teltat
<br>
Palvelut
<br>
Yhteistiedot
<br>
</div>
<div id="section">
<div class="main_block">
<div class="grid_block">
<img src=http://lorempixel.com/image_output/city-q-c-640-480-9.jpg>
</div>
<div class="grid_block">
<img src=http://lorempixel.com/image_output/city-q-c-640-480-9.jpg >
</div>
<div class="grid_block">
<img src=http://lorempixel.com/image_output/city-q-c-640-480-9.jpg>
</div>
</div><!--mainblock-->
</div>
<div id="footer">
<h3>POP-UP TELTTOJEN YKKÖNEN </h3>
</div>
<!--footer-->
</div>
<!--container-->
I put my div id="banner" and style it to give the color that matches the image but the color doesn't display. So, what should I do?
#cloud {
float: left;
padding: 0px;
margin: 0px;
}
#page {
width: 800px;
margin-right: auto;
margin-left: auto;
}
#home {
float: left;
padding-left: 30px;
padding-right: 30px;
text-align: center;
}
#banner {
background-color: #78c8f0;
}
<div id="page">
<div id="banner">
<div id="cloud">
<img src="Cloud4.gif" />
</div>
<!--cloud-->
<div id="home">
<h2>HOME</h2>
</div>
<!--home-->
</div>
<!--banner-->
</div>
<!--page-->
Since #cloud (the child of #banner) is floated, #banner essentially collapses and it acts like it doesn't have content. You can remedy this by adding overflow:auto to #banner.
#cloud {
float: left;
padding: 0px;
margin: 0px;
}
#page {
width: 800px;
margin-right: auto;
margin-left: auto;
}
#home {
float: left;
padding-left: 30px;
padding-right: 30px;
text-align: center;
}
#banner {
background-color: #78c8f0;
overflow: auto;
}
<div id="page">
<div id="banner">
<div id="cloud">
<img src="Cloud4.gif" />
</div>
<!--cloud-->
<div id="home">
<h2>HOME</h2>
</div>
<!--home-->
</div>
<!--banner-->
</div>
<!--page-->
Simply give #banner some height. See the snippet.
#banner {
background-color: #78c8f0;
height: 40px;
}
Snippet
#cloud {
float: left;
padding: 0px;
margin: 0px;
}
#page {
width: 800px;
margin-right: auto;
margin-left: auto;
}
#home {
float: left;
padding-left: 30px;
padding-right: 30px;
text-align: center;
}
#banner {
background-color: #78c8f0;
height: 40px;
}
<div id="page">
<div id="banner">
<div id="cloud">
<img src="Cloud4.gif" />
</div>
<!--cloud-->
<div id="home">
<h2>HOME</h2>
</div>
<!--home-->
</div>
<!--banner-->
</div>
<!--page-->
See this fiddle
Th background colour was not shown because, the element which contained the content was floated and thus the other elements were such that it doesnt even exist. thus,
Either change your css for #banner as follows
#banner {
float: left;
background-color: #78c8f0;
}
OR
change your css for #cloud as follows
#cloud {
/* float: left; */
padding: 0px;
margin: 0px;
}