This question already has answers here:
vertical-align with Bootstrap 3
(26 answers)
Closed 7 years ago.
I'm using Twitter Bootstrap and am trying to vertically center text next to an image that is larger than the current text.
I can't use line-height because the text goes over more than one line and I also want to allow for possible additions to the text; so I went to the display: table; display: table-cell; method but it still refuses to work.
Here is my HTML for the respective section:
<div class="fs">
<div class="container">
<div class="wrapper row">
<div class="icon col-md-2">
<a href="" target="blank">
<img src="fs-icon.jpg" width="170" height="76" alt="Flying Solo Icon">
</a>
</div>
<div class="text col-md-10">
<span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tincidunt, lacus sed pharetra luctus, odio purus faucibus nunc, mattis molestie sapien libero sit amet leo.
</span>
</div>
</div>
</div>
<!-- Container Ends -->
</div>
<!-- FS Ends -->
CSS:
#about .fs {
padding: 30px 0;
}
#about .fs .wrapper {
display: table;
}
#about .fs .icon {
display: table-cell;
}
#about .fs .text {
display: table-cell;
min-height: 76px;
vertical-align: middle;
}
... and here it is on CodePen: http://codepen.io/anon/pen/XbdRXE
I think the CSS may be clashing with the behavior of the default Bootstrap CSS. However, you could bypass this method altogether and try using this as a custom class:
.vertical-center {
display: inline-block;
vertical-align: middle;
float: none;
}
Just apply it to your span element.
Related
how do I align the quick view buttons horizontally?
I've tried css below but it doesn't work. Please advise. Thank you.
.woosq-btn {
display: flex;
justify-content: center;
}
I'm using WPC Smart Quick View plugin. Link https://wordpress.org/plugins/woo-smart-quick-view/
UPDATE - 3 MAY 2021
After using the CSS provided by #Ali Klein, it triggered another problem. All products are shown horizontally.
I fixed it by adding flex-wrap: wrap;
ul.products {
display: flex;
flex-wrap: wrap;
}
li.product {
display: flex;
flex-direction: column;
}
li.product > a {
flex: 1;
}
Final outcome:
The way I'd approach this is by applying display: flex; flex-direction: column on the individual cards, then wrapping all the content apart from the Quick View button in a container (it's already in a container a.woocommerce-loop-product__link), and give that container flex: 1 so it fills up the space of the card vertically.
.container {
display: flex;
}
.item {
display: flex;
flex-direction: column;
flex: 1;
margin: 10px;
background: lightblue;
}
.content {
flex: 1;
}
.image {
width: 100%;
height: 200px;
background-color: darkblue;
}
.description {
padding: 10px;
}
.btn {
margin: 10px;
}
<div class="container">
<div class="item">
<div class="content">
<div class="image"></div>
<p class="description">Suspendisse interdum consectetur libero id faucibus nisl tincidunt eget. Vitae sapien pellentesque habitant morbi tristique. </p>
</div>
<button class="btn">
Quick View
</button>
</div>
<div class="item">
<div class="content">
<div class="image"></div>
<p class="description">Sit amet nisl purus in mollis nunc sed id.</p>
</div>
<button class="btn">
Quick View
</button>
</div>
<div class="item">
<div class="content">
<div class="image"></div>
<p class="description">Diam phasellus vestibulum lorem sed risus ultricies. Elementum integer enim neque volutpat.</p>
</div>
<button class="btn">
Quick View
</button>
</div>
<div class="item">
<div class="content">
<div class="image"></div>
<p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua orci nulla pellentesque dignissim enim sit amet venenatis</p>
</div>
<button class="btn">
Quick View
</button>
</div>
</div>
With your markup, the css would look something like:
ul.products {
display: flex;
}
li.product {
display: flex;
flex-direction: column;
}
li.product > a {
flex: 1;
}
You'll end up with the following:
I have a row of two columns, one column contains an image and the other column some text. Is there a way I can always vertically align the text within the column so that it is always centered vertically? You can see an example here on the fourth and fifth row of what I'm trying to do:
http://machinas.com/wip/hugoboss/responsive-img/
The height depends on the size of the image really so I can't really set a height of the column.
HTML
<div class="row">
<div class="large-6 column">
<div class="txt-block">
<h3>Lorem ipsum dolor</h3>
<p>Vivamus eget tempus magna. Proin dignissim, est ac mollis viverra, ligula leo fringilla dolor, in porttitor quam lectus eget augue. Etiam vel felis at mauris pellentesque cursus dignissim in nunc.</p>
<div class="center-wrap">
<div class="center">
Jetzt entdecken
</div>
</div>
</div>
</div>
<div class="large-6 column">
<img src="http://placehold.it/470x400" alt="">
</div>
CSS
.column {
display: table;
float: left;
height: 100%;
padding-left: 0.5rem;
padding-right: 0.5rem;
position: relative;
}
You need to remove floats on the large-6 column div and add vertical align middle, also you should be displaying those as table-cells not tables. The row is acting as a table. See css below;
.large-6.column {
display: table-cell;
float: none;
vertical-align: middle;
}
If you don't need IE8 support then you can use CSS3 transform. In your case set top: 50% to your .txt-block and add transform: translateY(-50%); what will move the element 50% of it's height to the top.
JSFiddle DEMO
UPDATE
Other good solution is to style your divs a table instead of floating and use vertical-align: middle; as mentioned here by #Jay.
I have a weird issue with some of my divs. Right now my divs are set up to take up the whole screen then have a background color then a background image over it. However, while everything displays properly, if I try to add any content specifically everything disappears except for my background color. I've never had this problem before and I believe it has something to do with how my images and my div are set up. But I can't find a solution so I was wondering if any of you guys could help! I've included the html and css down below!
Here is the jsfiddle that might help: http://jsfiddle.net/e7C87/1/ the red section is the section where I'm trying to place a nav bar and where the background image dissapears
Html (the area with the is the div that's giving me issues all the other divs displays correctly):
<div id="induoIntro" class="divide">
<div class="graphic" style="background-color:#ff837b">
<p id="introGraphic"></p>
<nav>
Designers
Developers
Directors
</nav>
</div>
<div class="textBody">
<p>A rag-tag group of desginers, directors and developers hoping to collaborate with you in an effort to satisfy your endeavours, beautify the web, and enginneer a functional interaction; we'll even guaraantee affordability.</p>
</div>
</div>
<div id="designers" class="divide">
<div class="graphic" style="background-color:#FFB37B">
<p id="designGraphic"></p>
</div>
<div class="textBody">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ut posuere mauris. Nulla faucibus consectetur mi, nec luctus eros vulputate non. Cras id suscipit metus </p>
</div>
</div>
<div id="developers" class="divide">
<div class="graphic" style="background-color:#CEE28F">
<p id="devGraphic"></p>
</div>
<div class="textBody">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ut posuere mauris. Nulla faucibus consectetur mi, nec luctus eros vulputate non. Cras id suscipit metus </p>
</div>
</div>
<div id="directors" class="divide">
<div class="graphic" style="background-color:#C195DA">
<p id="directGraphic">
</div>
<div class="textBody">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ut posuere mauris. Nulla faucibus consectetur mi, nec luctus eros vulputate non. Cras id suscipit metus </p>
</div>
</div>
CSS:
.divide {
height:200%;
}
.graphic {
display:table;
height:50%;
width:100%;
}
.graphic p {
display: table-cell;
vertical-align: middle;
text-align: center;
}
#introGraphic {
background-image: url(../images/WAInduo-02.svg);
background-size: 50% 50%;
background-repeat: no-repeat;
background-position: center;
}
#designGraphic {
background-image: url(../images/WAdesign-03.svg);
background-size: 100% 80%;
background-repeat: no-repeat;
background-position: center;
}
#devGraphic {
background-image: url(../images/WAdevelop-04.svg);
background-size: 100% 80%;
background-repeat: no-repeat;
background-position: bottom center;
}
#directGraphic {
background-image:url(../images/WAdirect-05.svg);
background-size: 100% 80%;
background-repeat: no-repeat;
background-position: center;
}
.textBody {
display:table;
height:50%;
width:75%;
margin:auto;
}
.textBody p {
display: table-cell;
vertical-align: middle;
text-align: center;
font-family: 'Dosis', sans-serif;
font-size:45px;
margin:auto;
}
Okay, you have a lot of irrelevant code there. Here is a JSFiddle and the code that is relevant to your problem (it can be difficult to determine, but if possible, it really helps to provide only the requisite code that we need to solve your problem): JSFiddle
HTML:
<div id="header">
</div>
<div id="induoIntro" class="divide">
<div class="graphic">
<p>Graphic Test</p>
<nav>Test</nav>
</div>
</div>
CSS:
html, body {
height: 100%;
}
#header {
position: absolute;
height: 70px;
top: 0;
width: 100%;
background-color: #fff;
}
.divide {
height: 200%;
}
.graphic {
display: table;
height: 50%;
width: 100%;
background: #ff837b;
}
.graphic p {
display: table-cell;
vertical-align: middle;
text-align: center;
}
As you can see from the JSFiddle, the <p> contents of "Graphic Test" are appearing properly, but the <nav> content is not. Well, if you look at the CSS, you see that any <p> element that is a child of an element with the .graphic class has special instructions, namely display: table-cell, vertical-align: middle;, and text-align: center;.
The <nav> class, however, has no such special instructions. If you remove those instructions from your .graphic p selector, you'll see that "Graphic Test" disappears as well. Where is it going? You can find it using your browser's built-in code inspector, but I'll just tell you: it's moving up to the top of the document.
But wait, isn't that where your header is? Exactly. You have an absolutely positioned header, which means it is removed from the normal document flow and placed on top of the document. So, in effect your <nav> element is being hidden by your header. To illustrate this, we'll give some opacity to your header and see the element sitting behind it:
JSFiddle
Now, if we go back to your original provided JSFiddle and do the same thing to the header there, this is what you'll see: JSFiddle
So to solve this, you should take the CSS properties you have for .graphic p and copy them to a new selector, .graphic nav, or something similar. Hope this helps! :-)
I'm trying to create a page with two divs inside a content div to act as columns. While I understand that this is a question that is often asked here, the difference is, I need the left side to be a title for the corresponding content on the right, but the content on the right will differentiate in height, and I need this to affect where the next title below on the left will appear.
Below is an image of how I want this to work, and how I'm guessing it can be done?
http://i.stack.imgur.com/aY8bt.png
Currently I'm doing this with HTML tables, which we all know is messy!
Many thanks in advance!
Dylan
without table, we can do it like this:
<div id="master">
<div class="title">TITLE A</div>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ac velit risus. Donec et libero erat. Pellentesque eros libero, lobortis eu diam accumsan, commodo tincidunt diam. Integer nec tincidunt dui.</div>
<div class="magicClear"></div>
<div class="title">TITLE B</div>
<div class="content">Tiny content with tiny height</div>
<div class="magicClear"></div>
<div class="title">TITLE C</div>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ac velit risus. Donec et libero erat. Pellentesque eros libero, lobortis eu diam accumsan, commodo tincidunt diam. Integer nec tincidunt dui.</div>
<div class="magicClear"></div>
</div>
css :
#master {
width: 650px;
margin: auto;
}
.title {
float: left;
width: 100px;
}
.content {
width: 450px;
padding-left: 100px;
margin-bottom: 20px;
}
.magicCLear {
clear: both;
}
http://jsfiddle.net/djedjex/GU7RW/1/
try this one
table
{
border:none;
}
table td:first-child
{
border-right:2px solid #000;
text-align:right;
}
table td
{
padding:10px;
vertical-align:top;
min-width:100px;
}
http://jsfiddle.net/GRX99/2/
if you used table tags, you can turn them into regular tags and use display:table / table-cell :
demo : http://codepen.io/anon/pen/aEBkA
HTML BLOCK for your title > content . use as many as needed.
<article>
<h1>titre</h1>
<div>
<p>text</p>
<p>and text again</p>
</div>
</article>
and minimal CSS:
article {
display:table;
table-layout:fixed;
/* tune next 2 rules */
width:80%;
margin:auto;
}
article h1,
article div {
display:table-cell;
padding:0.5em;
}
article h1 {
width:15%;
border-right:solid;
}
You can also do something fluid, Bootstrap inspired.
<div>
<div class="row">
<div class="span2">
<p>Title A</p>
</div>
<div class="span10">
<p>Very long content</p>
</div>
</div>
<div class="row">
<div class="span2">
<p>Title B</p>
</div>
<div class="span10">
<p>Another very long content</p>
</div>
</div>
</div>
And the CSS:
[class*="span"] {
float: left;
}
.span2 {
width: 20%;
}
.span10 {
width: 80%;
}
.span2 p {
float: right;
}
You have to adjust margins/paddings, but that's it.
I'm trying to center a Div that will have varying width's (based on content of a website).
I read about a relative positioning technique here:
http://www.tightcss.com/centering/center_variable_width.htm
But I thought there has to be an easier way to do it?
That's a pretty solid method that should work well in most browsers. It's not really that complex when you break it down. Here's a basic example:
<style type="text/css">
#hideoverflow { overflow: hidden; }
#outer { position: relative; left: 50%; float: left; }
#inner { position: relative; left: -50%; float: left; }
</style>
<div id="hideoverflow">
<div id="outer">
<div id="inner">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id velit vel augue fringilla rhoncus at et odio. Suspendisse potenti. Aliquam justo libero, commodo ut iaculis in, placerat vel purus.
</div>
</div>
</div>
#Talon; you can do it like this http://jsfiddle.net/sandeep/7PXQF/
CSS:
.container{
background-color:red;
text-align:center;
}
.center{
background-color:yellow;
display:inline-block;
text-align:left;}
HTML:
<div class="container">
<div class="center">
<p>This is a div with an much wider width, to make the yellow div go off the page to the right. We'll type a bit more to be sure.</p>
<p>Most people will see a horizontal scroll bar on the bottom, unless their screen is very wide.</p>
</div>
</div>
Well, it can't get any simpler than this and has full support on all browsers; doesn't even need a container:
.centered {
display:table;
margin:0 auto;
}
<div class="centered">
content
</div>
Here is a working fiddle: https://jsfiddle.net/1tnprnoz/
Now with flex-box you can easily achieve this with justify-content: center;.
#container{
background: gray;
display: flex;
justify-content: center;
}
<div id="container">
<div id="content" style="width: 200px; padding: 5px; background: #ffa637;">
This is a centered div This is a centered div This is a centered div This is a centered div
</div>
</div>
This can also be achieved by applying margin: auto to the containers child selector #container>*.
#container{
background: #c7c7c7;
}
#container>*{
margin: auto;
}
<div id="container">
<div id="content" style="width: 200px; padding: 5px; background: #ffa637;">
This is a centered div This is a centered div This is a centered div This is a centered div
</div>
</div>
Note: content div is styled inline as these styles are generated styles and are out of the scope of this question.