This question already has answers here:
How can I vertically center text in a dynamically height div?
(10 answers)
Closed 7 years ago.
I want to centre some text within a DIV vertically. However, I'm using Bootstrap and none of the conventional methods seem to work because it's within a column. Here's what I've got so far:
HTML:
<div class="col-sm-6">
<div class="innercontent">
<h2 class="text-center">Last Hope: The Halo Machinima</h2>
</div>
</div>
CSS:
.innercontent {
display:block
margin:auto 0;
}
The col-sm-6 doesn't have a set height and nor does the inner because they will vary on multiple uses. The CSS is what I assumed would work but doesn't.
The effect I kinda want you can see on the live dev site here: http://dev.infiniteideamedia.com/machinima/lasthope.php but it's not perfectly centred using a less than adequate method.
This is how you center anything inside div which has dynamic height
.col-sm-6 {
border: 1px solid;
min-height: 300px;
position: relative;
max-width: 600px;
}
h2 {
margin: 0;
position: absolute;
top: 50%;
transform: translate(0%,-50%);
width: 100%;
text-align: center;
}
<div class="col-sm-6">
<div class="innercontent">
<h2 class="text-center">Last Hope: The Halo Machinima</h2>
</div>
</div>
David Walsh has written a good article on centering. Have a look at it.
Run below snippet
.innercontent {
height:400px;
background:#777;
padding-top:20%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-sm-6">
<div class="innercontent">
<h2 class="text-center">Last Hope: The Halo Machinima</h2>
</div>
</div>
Related
This question already has answers here:
Expand a div to fill the remaining width
(21 answers)
Closed 5 years ago.
With Bootstrap or W3 it is easy but in this application I don't want to use that to make the columns. How do I handle the columns issue withe pure css?
I need to do something like this:
I repeat... Whithout using bootstrap, w3 or any other css framework, how do I make this.
This is my simple HTML code:
<div style="width: 50px; float: left">
<< Prev
</div>
<div style="float: left">
<h1>Some Info... this is the responsive div. Always the rest of the size extracting the 50px of the other divs</h1>
</div>
<div style="width: 50px; float: left">
Next >>
</div>
You can use flexbox:
.container {
display: flex;
height: 200px;
}
.side {
width: 50px;
height: 100%;
background: purple;
}
.middle {
flex-grow: 1;
background: blue;
}
<div class="container">
<div class="side"></div>
<div class="middle"></div>
<div class="side"></div>
</div>
What's the best way to do this?
I have a full-width row (320px). 160px is an image on one side, the other 160px is reserved for text. Is it a simple float, or is there a less destructive way?
<div class="two-up_img u-pull-right">
<figure>
<img src="../img/img.jpg">
</figure>
</div>
<div class="two-up_info">
<div class="inner">
<h4 class="highlight">Rob</h4>
<div class="small">
<p>Landing Page</p>
<p>Brand Identity</p>
</div>
</div>
</div>
CSS
.two-up_info {
height: 160px;
background: #fff;
}
.two-up_info .inner {
text-align: center;
position: relative;
top: 50%;
transform: translateY(-50%);
}
.two-up_img {
max-width: 50%;
}
I'm using a framework called Skeleton (http://getskeleton.com/), which is where the u-pull-right comes from. It floats an element to the right.
You want to wrap your html in a parent div and apply the styling clear: both to that parent div.
See this fiddle: https://jsfiddle.net/5gkzh2pa/
Or, if you are not concerned about supporting old browsers, take a look at flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
This question already has answers here:
How to center an element horizontally and vertically
(27 answers)
Closed 7 years ago.
This is probably not too difficult, but for some reason - I've tried a couple of different solutions - I have some problem getting it right. I have two different div elements, a header and a textfield, that I want to center both horizontally and vertically in the middle of an enclosing div element. The header should be above the textfield.
The enclosing div element has fixed proportions, but the header varies in length and can take up just one line or more than one line.
How can I achieve this?
The HTML:
<div id="square">
<div id="header">
<h3>header</h3>
</div>
<div id="textfield">
<input id="textfield" type="text">
</div>
</div>
In CSS, I have tried various combinations of text-align: center, vertical-align: middle, left/right/top/bottom: 0 + margin: auto, etc, but so far I have only been able to center the divs horizontally.
In some of my solutions I have even tried having a fourth div element in between the outer and the inner ones.
You can do this using display:flex:
#square {
display: flex;
align-items: center; /*horizontal centering*/
justify-content: center; /*vertical centering*/
flex-direction: column; /*keep the h3 above the textbox*/
/* these are for demo only*/
width: 400px;
height: 400px;
border:1px solid red;
}
h3 {
margin-top:0; /* removing margin otherwise you'll get someone commenting the h3 isn't vertically centered*/
}
<div id="square">
<div id="header">
<h3>header</h3>
</div>
<div id="textfield">
<input id="textfield" type="text">
</div>
</div>
Does this work?
#square {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 1px solid #ccc;
}
<div id="square">
<div id="header">
<h3>header</h3>
</div>
<div id="textfield">
<input id="textfield" type="text">
</div>
</div>
I've been trying, but struggling to get this layout going using twitter bootstrap, what I need is a centered page with two side columns that don't scroll with the page but a center column that does.
for reference the black displays the entire screen space, with blue showing body content, two grey boxes being non scrolling, but maroon scrolling normally as it is the main content for the page
Setting any column with position fixed makes them overlap, and attempting to use a traditional sidebar takes it to the edge of the view space, which is also undesired. any ideas?
The example shows to use the universal scollbar (on the right side of browser frame, rather than in the middle), live demo: http://jsfiddle.net/hm4do8mg/
HTML
<div class="left">
<p>left</p>
</div>
<div class="midd">
<p style="height:2000px;">midd</p>
<p>bottom</p>
</div>
<div class="righ">
<p>righ</p>
</div>
CSS
body, p {
text-align: center;
margin: 0;
}
.left,
.righ {
background: lightgrey;
position: fixed;
}
.left {
width: 20%;
}
.midd {
background: paleturquoise;
width: 60%;
position: relative;
left: 20%;
top: 0;
}
.righ {
width: 20%;
right: 0;
top: 0;
}
The layout you asked, is kind of old fashion style like <iframe>. You can also use <table> to do it, it's the most solid, and easiest way to me (ignore it if you need a mobile version).
I made a fiddle that can help you achieve this. But I haven't used Bootstrap. You can easily make these changes on bootstrap grid.
JSFIddle
I think this could fit your needs. It's not perfect, but it's a starting point.
HTML
<div class="container">
<div class="row">
<div class="first col-xs-3">
<div class="fixed">
<p>Fixed</p>
</div>
</div>
<div class="col-xs-6 scroll">
<p>PUT A NOVEL IN HERE</p>
</div>
<div class="second col-xs-3">
<div class="fixed second">
<p>Fixed</p>
</div>
</div>
</div>
</div>
CSS
html, body {
background:#CCCCCC;
height:100%;
}
.container, .row {
height:100%;
}
.fixed {
height:100%;
background:#FFFFFF;
position:fixed;
width:20%;
}
.scroll {
height:100%;
background:#000000;
overflow:auto;
}
.second.fixed{
margin-left:-15px;
}
DEMO
Fiddle
This question already has answers here:
How to vertically align an image inside a div
(37 answers)
Closed 8 years ago.
<div class="col-md-3 image-container">
<img class="image" src="path-to-my-image">
</div>
<div class="col-md-9 dynamic-text-container">
<p><!-- Dynamic text here --></p>
</div>
I am using bootstrap 3 in my project. How do I centre the image vertically inside the div having variable height (WITH CSS TABLE CENTERING)?
Here's a demo:
http://www.bootply.com/7rSVv7uDBu
Jsfiddle Demo
Amended CSS
.card{
display:table;
}
.image-container,
.dynamic-text-container{
display:table-cell;
vertical-align:middle;
}
.image-container {
width:25%; /* or some other value */
}
.image-container img {
display: block;
margin:0 auto;
}
Take a look at this:
HTML:
<div class="col-md-3 image-container">
<img class="image" src="image.png" height="200px;" width="200px" />
</div>
<div class="col-md-9 dynamic-text-container">
<p>Some text....</p>
</div>
CSS:
.image-container {
height: 600px;
text-align: center;
}
.image {
position: relative;
top: 50%;
margin-top: -100px; /* half of image height */
}
DEMO HERE