I'm trying to align a div within my page so that it sits directly in the centre at all times. I've searched the site, but can't see any solutions for centring in the page rather than just a div.
Using bootstrap (3.2.0) I can centre it horizontally, but not vertically!
Here is my code so far:
HTML
<div class="slide">
<div class="container">
<div class="row">
<div class="logo col-md-4 col-md-offset-4">
<p>Test</p>
</div>
</div>
</div>
</div>
CSS
.logo {
border: solid;
border-color: red;
border-width: 5px;
height: 200px;
}
I tried verticle-align: middle;, margin:auto; & margin-top:auto; margin-bottom:auto; to no effect.
The closest I can get is to use margin-top: 20%; but this doesn't shrink as the page height does.
There is no magical way in bootstrap to do it. You need a helper div wrapper in order to immolate a table structure.
<div class="slide">
<div class="container">
<div class="row">
<div class="logo col-md-4 col-md-offset-4">
<div class="helper">
<span>Test</span>
</div>
</div>
</div>
</div>
</div>
.logo {
border: solid;
border-color: red;
border-width: 5px;
height: 200px;
}
.helper{
background:#ccc;
width:100%;
height:100%;
text-align:center;
display:table;
}
span{
display:table-cell;
vertical-align:middle;
}
Related
I am tired for create responsive grid in css & html,the following image may be easy to figure out. many thanks for help.
Here is my example image:
You might use an excellent framework for it : bootstrap !
They have an excellent grid system :)
You might find everything you need here :
http://getbootstrap.com/css/#grid
Hope that should help :)
Here is my css & Html but I can't write prefect css I am so beginner with css & html.
<div class="wrapper">
<div class="Box1">
Box1
</div>
<div class="container_right">
<div class="Box2">Box2</div>
<div class="Box3">Box 3</div>
<div class="Box4"> Box4</div>
</div>
</div>
CSS:
.wrapper {
overflow:hidden;
width: 1060px;
margin:0 auto;
padding:5px;
}
.wrapper Box1 {
float:left;
margin-right:10px;
width:520px;
padding:5px;
background-color:#808080;
}
.wrapper .container_right {
width:520px;
float:right;
}
.container_right .box2 {
width:100%;
height:200px;
margin:5px;
padding:5px;
background-color:#808080;
}
.container_right .box3 {
width:50%;
height:200px;
padding:5px;
background-color:#808080;
}
.container_right .box4 {
width:50%;
height:200px;
padding:5px;
background-color:#808080;
}
1) Here's how Stack Overflow works: learn, try, fail, then come ask for help here. So you need to show some effort yourself.
2) Anyway, there must be a million ways to build such a layout. Here is a sample with Bootstrap, using images as content. Includes some unfortunate stabbing of the framework, to get rid of the gutter between things.
Fiddle:
https://jsfiddle.net/csy1wypc/1/
HTML:
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-6">
<div class="single">
<div class="img-holder">
<img src="http://lorempixel.com/g/900/400/">
</div>
</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-6">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="double">
<div class="img-holder">
<img src="http://lorempixel.com/g/800/400/">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-6">
<div class="single">
<div class="img-holder">
<img src="http://lorempixel.com/g/600/400/">
</div>
</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-6">
<div class="single">
<div class="img-holder">
<img src="http://lorempixel.com/g/700/400/">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
CSS:
.col-md-6,
.col-md-12,
.col-sm-6,
.col-sm-12,
.col-xs-6,
.col-xs-12 {
padding: 0;
}
.row {
margin: 0;
}
.single,
.double {
position: relative;
width: 100%;
overflow: hidden;
}
.single {
padding-bottom: 100%;
}
.double {
padding-bottom: 50%;
}
.single .img-holder,
.double .img-holder {
position: absolute;
width: 100%;
text-align: center;
}
.single img,
.double img {
position: relative;
max-height: 100%;
left: 100%;
margin-left: -200%;
}
How can I get a div with overflow: scroll; or overflow: auto; to scroll multiple contained divs?
If I have a single div, with a single child div, and the child div is wider than the container, then overflow:scroll; works great.
div.container {
overflow-x: scroll;
width: 150px;
border: 1px solid black;
}
div.inner2 {
width: 300px;
float: left;
}
<div class="container">
<div class="inner2">
ABCD1234WXYZ ABCD1234WXYZ
</div>
</div>
But if I have multiple inner floated divs, where each one is less than the width of the container, but in sum they are greater than the container, it wraps the floated divs.
div.inner {
width: 100px;
float: left;
}
div.container {
overflow-x: scroll;
width: 150px;
border: 1px solid black;
}
div.container:after {
clear: both;
}
<div class="wrapper">
<div class="inner">ABCD</div>
<div class="inner">1234</div>
<div class="inner">WXYZ</div>
</div>
How do I get it to append the floating divs horizontally and scroll?
jsfiddle here: http://jsfiddle.net/hw4ykza6/
Note that the contained divs will be resized at various times. I do not know in advance what the max or min width for them will be, only what they are now.
I think i've achieved what you want here (note i only applied my changes to your top example):
JSFIDDLE
The key things to note are:
I've added an inner wrapping element with class="inner-container" that is display:table-row
The elements of class inner now have display:table-cell
You don't need floats there. div.inner {display: table-cell;} will give you what you want:
div.inner {
width: 100px;
display: table-cell;
}
div.container {
overflow-x: scroll;
width: 150px;
border: 1px solid black;
}
<div class="wrapper">
<div class="inner">ABCD</div>
<div class="inner">1234</div>
<div class="inner">WXYZ</div>
</div>
You can also use a dispaly: inline-block; style and apply that style to all the child divs
e.g
<div style="width:300px; overflow-x:scroll; height:auto;">
<div class="box" style="width:100px; height:200px; display:inline-block;">
</div>
<div class="box" style="width:100px; height:200px; display:inline-block;">
</div>
<div class="box" style="width:100px; height:200px; display:inline-block;">
</div>
<div class="box" style="width:100px; height:200px; display:inline-block;">
</div>
<div class="box" style="width:100px; height:200px; display:inline-block;">
</div>
<div class="box" style="width:100px; height:200px; display:inline-block;">
</div>
<div class="box" style="width:100px; height:200px; display:inline-block;">
</div>
</div>
Note:am using inline styling for explanatory purposes
You could try coding with less so you can get your heights as a single variable so u can then use later
I need to place a rectangular div in the middle of another rectangular div that's inside yet another container div. The image inside the innermost div has to be centered both horizontally and vertically in relation to the outermost div. How do I do that?
<div class="col-sm-4 col-sm-offset-1" style="margin-right:10px;">
<div class="panel panel-default" style="min-height:320px;">
<div class="panel-body" style="padding:0;">
<img src="">
</div>
<div>
</div>
#div1{
border:1px solid;
width:200px;
height:200px;
}
#div2{
border:1px solid;
width:100px;
height:100px;
margin:25%;
}
#div3{
border:1px solid;
width:50px;
height:50px;
margin:25%;
}
<div id="div1">
<div id="div2">
<div id="div3"></div>
</div>
</div>
Make sure all the divs have width and height set and then use:
margin: 25%;
On the inner divs
Using TWBootstrap with span3 and span4 columns. I want to align the text in span3 to the bottom of image in span9. I think I have achieved this but feel I've thrown in the kitchen sink to do it. Also I don't understand why the TWB span sizes aren't working? For example how do I get the leftcol text to right aligned and to the edge of this column? Could someone please explain - I seem to be going round in circles. The example is on jsfiddle
<div class="container">
<div id="main">
<div class="row">
<div id="leftcol">
<span class="span4">
<h1>Right</h1>
<h4>Enter</h4>
</span>
</div>
<span id="mainpic" class="span8 box">
<p align="middle">green box </p> <p align="middle">representing image</p>
</span>
</div>
</div>
</div>
css
body { height: 100%; width: 100%; position: absolute; }
h1 h4 { text-align:right; }
#main { position:relative; background:red; height:400px; width:300px; }
#leftcol { position:absolute; background:blue; bottom:5px;}
#mainpic { position:absolute; background:green; top:10px; left:25%; }
.box { height: 370px; width: 300px; border: solid 10px #ccc; }
I'm wondering if you are using the right tool for the job? You've wrapped all your content in a main div that you have given a width of 300px. In addition to some other problems, at this width bootstrap collapses to a single stacked column.
I have a div that contains inside 3 'floated' divs. The containing div has a line of text. The three floating inner divs also have a line of text.
When I specify text-align center for the outermost containing div, the three nested divs appear first, on one row next to each other left-to-right, and THEN the containing div's text appears to the right of the contained divs, centered in the space to the right of them.
Instead, I don't understand why the outermost containing div's text will not appear centered in the browser window, then below that the 3 contained divs and their text would appear. That's what I need to happen.
Here is the code. By the way I tried to embed a .jpg image into this question so you can see the problem -- anyone know how to display a screenshot or .jpg into a question here?
<head>
<style>
#myRowStyles
{
text-align:center;
margin-bottom:100px;
background-color:#b0e0e6;
border: 1px solid red;
}
#leftSide
{
width:120px;
float:left;
margin-left:10px;
margin-top:30px;
border: 1px solid red;
}
#centerPiece
{
width:120px;
float:left;
margin-left:10px;
margin-top:30px;
border: 1px solid red;
}
#rightSide
{
width:120px;
float:left;
margin-left:10px;
margin-top:30px;
border: 1px solid red;
}
</style>
</head>
<div id="myRowStyles"><b>THIS IS THE TOP OF THE ROW</b>
<div id="leftSide"> LEFT SIDE -- Leftie
</div>
<div id="centerPiece"> Centerpiece, Folks.
</div>
<div id="rightSide"> All Righty -- RIGHT SIDE
</div>
</div>
<div style="clear:both">
</div>
<div id="myRowStyles"><b>THIS IS ROW #2</b>
<div id="leftSide"> LEFT SIDE -- Leftie
</div>
<div id="centerPiece"> Centerpiece, Folks.
</div>
<div id="rightSide"> All Righty -- RIGHT SIDE
</div>
</div>
First you have multiple same ID's on the page. That's bad. Change them to classes.
Second give myRowStyles a width.
I think that to make divs behave like tables you must define the display attributes in CSS:
#container {
display: table;
}
#row {
display: table-row;
}
#left, #right, #middle {
display: table-cell;
}
So you will also need to add an extra <div> at the beginning for the container. I haven't tested this.
Also, I dont think you can make a single row span 3 columns when using DIVs so you must do something like this:
<head>
<style>
#container {
width:90%;
float:center;
margin-left:10px;
margin-top:30px;
border: 1px solid blue;
text-align:centre;
display: table;
}
#myRowStyles
{
text-align:center;
background-color:#b0e0e6;
border: 1px solid red;
display: table-row;
}
#leftSide,#centerPiece,#rightSide
{
width:120px;
margin-left:10px;
margin-top:30px;
border: 1px solid red;
display: table-cell;
}
</style>
</head>
<div id="container">
<div id="myRowStyles">
<div id="leftSide">
</div>
<div id="centerPiece"> Row 1
</div>
<div id="rightSide">
</div>
</div>
<div id="myRowStyles">
<div id="leftSide"> LEFT SIDE -- Leftie
</div>
<div id="centerPiece"> Centerpiece, Folks.
</div>
<div id="rightSide"> All Righty -- RIGHT SIDE
</div>
</div>
<div id="myRowStyles">
<div id="leftSide">
</div>
<div id="centerPiece"> Row 2
</div>
<div id="rightSide">
</div>
</div>
<div id="myRowStyles">
<div id="leftSide"> LEFT SIDE -- Leftie
</div>
<div id="centerPiece"> Centerpiece, Folks.
</div>
<div id="rightSide"> All Righty -- RIGHT SIDE
</div>
</div>
</div>
Try something like this: http://jsfiddle.net/We74E/2/