I am having trouble vertical aligning text in a div. I have tried suggestions that i have read on other posts. I'm sure its obvious what I am doing wrong but its not working.
http://jsfiddle.net/o6gqvtoo/
<div class="banner">
<div class="span10"> <!-- bootstrap -->
<div class="banner-text">
<div class="pull-left">Here is the first line of text i want to center</div>
<div class="pull-left">Here is the second line of text i want to center</div>
<div class="clear"></div>
</div>
</div>
.banner{
margin-top:-2;
height: 70px;
background-color: #cf0000;
color: white;
height: 70px;
position: relative;
}
.banner-text{
display: block;
vertical-align: middle;
}
.pull-left {
display: block;
}
vertical-align is sort of an odd one.
Generally you should use it on the elements themselves, not their containers and it's really only for inline and inline-block elements.
But even then it probably won't vertically center like (I'm guessing) you are wanting. So a little trick is to set your line-height to the same as your height and voila:
http://jsfiddle.net/06c7eosv/
Note: With display: inline-block and width: 50% you can't have any white space between the elements in your html
Good:
<div>...</div><div>...</div>
Bad:
<div>...</div>
<div>...</div>
Based on the supplied image and limited information availableI believe that the best option available is to absolutely position the banner-text wrapper div
.banner {
margin-top: -2;
height: 70px;
background-color: #cf0000;
color: white;
height: 70px;
position: relative;
}
.banner-text {
display: block;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.pull-left {
display: block;
}
<div class="banner">
<div class="span10">
<!-- bootstrap -->
<div class="banner-text">
<div class="pull-left">Here is the first line of text i want to center</div>
<div class="pull-left">Here is the second line of text i want to center</div>
</div>
</div>
</div>
That said, other options may be available if the two internal divs can be combined.
Usually, vertical-align sets the alignment of inline level elements relatively to the line box.
However, in when applied to table cells, it has a different meaning: it sets the alignment of the content inside the cell.
Therefore, you can use CSS tables:
.banner {
display: table;
width: 100%;
}
.banner > .span10 {
display: table-row;
}
.banner-text {
display: table-cell;
vertical-align: middle;
}
.banner{
margin-top:-2;
height: 70px;
background-color: #cf0000;
color: white;
height: 70px;
position: relative;
display: table;
width: 100%;
}
.banner > .span10 {
display: table-row;
}
.banner-text{
display: table-cell;
vertical-align: middle;
}
.pull-left {
display: block;
/* float:left; */
}
<div class="banner">
<div class="span10"> <!-- bootstrap -->
<div class="banner-text">
<div class="pull-left">Here is the first line of text i want to center</div>
<div class="pull-left">Here is the second line of text i want to center</div>
<div class="clear"></div>
</div>
</div>
</div>
Related
I have an HTML page and I want to have a table that has four or five section and this is my first section with two columns but my text on the left side I can't get to the top. I'm tried adding padding-top: 0; adjusting the margin, aligning. I think maybe the combo on the div either adding to the sidebar or mycolumn in the table row since I want to rows in the left column.
/*CSS*/
#sidebar {
width: 750px;
}
.table-row {
display: table;
width: 100%;
margin-top: 0px;
}
.mycolumn {
display: table-cell;
padding: 15px;
}
#content {
width: 100%;
}
div {
outline: none;
}
#sidebar1 {
width: 750px;
}
.table-row2 {
display: table;
width: 100%;
}
.mycolumn1 {
display: table-cell;
padding: 15px;
}
#content1 {
/* width:100%; */
}
<!-- HTML -->
<div class="container">
<div class="row">
<div class="table-row">
<div class="mycolumn" id="sidebar">
<h1 class="promo_slogan"> Bring everyone together to build better products.</h1>
</div>
<div class="mycolumn" id="content"><img src="file:///C:\Develop\CodeSamples\manage-landing-page-master\images\illustration-intro.svg">
</div>
</div>
</div>
</div>
Try to use display: flex;instead of display: table;
And then set your h1 margin: 0;, because the h1 tag has default margin.
You use container and row as classes, but you don't define it in your css. Are you using bootstrap?
You also have padding in mycolumn. This will add padding left, top, right, and bottom.
Also consider:
.mycolumn { vertical-align: top; }
to force to the top.
I am trying to display an image next to two lines of text, which are centered. I have attached an example, and you will see from it that the image is to the left of the text, whereas I am trying to center the image to be on the left side of the text, and have a perfectly centered image/text.
CSS:
.center-class{
text-align:center;
}
.righty img{
max-width: 100px;
float:left;
}
.vid-open{
}
HMTL:
<section class="">
<div class="row pull-down">
<div class="center-class">
<div class="righty">
<img src="http://www.psdgraphics.com/file/white-egg.jpg" >
<h2>This is a header.</h2>
<h5 class="vid-open">some text some text some text<span class="icon-right-left-01-011" ></span></h5>
</div>
</div>
</div>
</section>
SEE DEMO
Simply wrap the text in a div and display it inline-block:
.center-class {
text-align: center;
}
.righty > * {
display: inline-block;
vertical-align: middle;
}
.righty img {
max-width: 100px;
}
<section class="power-of-egg">
<div class="row pull-down">
<div class="center-class">
<div class="righty">
<img src="http://www.psdgraphics.com/file/white-egg.jpg">
<div class="con">
<h2>This is an egg.</h2>
<h5 class="vid-open">eggs are very nutritious<span class="icon-right-left-01-011" ></span></h5>
</div>
</div>
</div>
</div>
</section>
Updated Codepen
Well, this will center the entire block:
.center-class{
text-align:center;
}
.righty img{
max-width: 100px;
float:left;
}
.vid-open{
}
.righty {
width: 300px;
margin: 0 auto;
}
The problem is that you've got your image inside of a div and div is a block-level element, which means it will expand to be the full width of its parent element.
If you take the image out of the div and make the div that contains the text have:
display:inline-block;
That div will shrink down to be only as wide as its content.
Here's your updated code: http://codepen.io/anon/pen/LNNJRQ
To horizontally center an element you can use display: block; and margin: auto;. There may be a better approach but this is the css I used to have the image in the center and the text to the right of it:
.righty > .con {
position: absolute;
top:0;
left: 55%;
}
.righty img {
display: block;
vertical-align: middle;
margin: auto;
max-width: 100px;
}
Note: the position of the class .con will vary based on screen size.
Here is the updated codepen.
I am trying to center my .get-started-btn vertically within a bootstrap column. I believe that the problem may be because this button is already placed inside a div with display: table-cell so i cannot create a table-cell within another table-cell? Is there another way to center the button vertically?
See my fiddle:
JS Fiddle
<div class="page-wrap">
<main>
<div class="jumbotron" id="jumbotron">
<div class="container">
<div class="row">
<div class="col-md-8">
<h1 class="page-header">Flash <span class="page-header-label">Cards</span></h1>
<p class="lead intro-text">
Flash Cards is a simple solution for anyone trying to memorize new things or study for that next big test.
Create your own personal deck of flash cards in minutes and we will track your results to ensure that
you know your stuff.
</p>
</div>
<div class="col-md-4">
<div class="vcenter">
Get Started
</div>
</div>
</div> <!-- end row -->
</div> <!-- end container -->
</div> <!-- end jumbotron -->
</main>
</div>
CSS
.page-wrap {
width: 100vw;
height: 100vh;
}
main {
display: table;
width: 100%;
height: 100%;
}
#jumbotron {
display: table-cell;
vertical-align: middle;
float: none;
}
.vcenter {
display: table;
height: 100%; /* does nothing */
width: 100%; /*pushes element to new line */
text-align: center;
}
.vcenter a {
display: table-cell;
vertical-align: middle;
float: none;
}
Apologies for misunderstanding your question. Once I increased the width, I saw the two columns.
You can vertically center the button by adding these styles:
.row {
display: table-cell;
}
.vcenter a {
position: relative;
top: 50%;
transform: translateY(-50%);}
}
Fiddle
Does div with paragraph will always have the same content? If yes then you could try:
.vcenter {
line-height: 270px; /*height of entire div on the left*/
}
And remove this:
.vcenter a {
display: table-cell;
vertical-align: middle;
float: none;
}
I have a text that will dynamically change length and when the length increase, it pushes the div to the right for it further to the right. What I want is to make sure the text length is not affecting the div on the right, not pushing it. The text start out with one char and will not be longer than two char.
In the picture below I tried to illustrate the problem first, and how I want it to look second.
#hjertePic {
position: relative;
margin-top: 29%;
margin-right: 26%;
float: right;
margin-left: 25%;
}
#heartCount {
position: relative;
float: left;
margin-top: 5%;
margin-left: 20%;
margin-right: 5%;
font-size: 100px;
color: white;
text-align: center;
}
heartCount is the text and hjertePic is the div I don´t want to move. Appreciate all the help I can get. :)
You might want to use display: inline-block and a fixed width for the div containing number:
.row .number, .row .text {
display: inline-block;
}
.row .number {
width: 20px;
}
<div class="row">
<div class="number">1</div>
<div class="text">DIV</div>
</div>
<div class="row">
<div class="number">2</div>
<div class="text">DIV</div>
</div>
<div class="row">
<div class="number">13</div>
<div class="text">DIV</div>
</div>
UPDATE: The answers have got me close, but they still don't align vertically as the text div is larger, how can I make them both the same height and therefore align?
I would like to have two DIVs next to each other, one containing an image and one containing text, both sitting in a container DIV.
The image should be 15% of the width of the container div, with the text using the remaining 85%
The image and text should be aligned vertically within their respective DIVs, so it looks like they are aligned with each other.
I've tried to work this out but can't seem to do it! Can anyone help?
#picture {
float: left;
width: 15%;
line-height: auto;
}
#text {
width: auto;
padding-left: 16%;
line-height: auto;
vertical-align: middle;
margin-top: auto;
margin-bottom: auto;
}
#text p {
display: inline-block;
vertical-align: middle;
line-height: normal;
}
and
<div id="quotes">
<div id="picture">
<img style="width: 100%; vertical-align: middle" src="tom.jpg" >
</div>
<div id="text">
<p>"Christiaan was one of the stand out candidates throughout, therefore there was no hesitation in offering him a place on this highly sort after scheme..."</p>
</div>
</div>
Here's a fiddle with your code in it: http://jsfiddle.net/hQ6Vw/1/
The only changes I made was to assign matching top/bottom margins to the img and p tags. I think that will give you the effect you're looking for.
If you use float and verticl-align, those two won'nt work together.
Float extract itself from regular flow and go slide on one side or the other on top of next line right after any content within the regular flow.
Vertical-align works:
in betweem inline-boxes (inline-block-level element or displayed so with display:inline-block;)
inside td or it's CSS default display : display:table-cell;
here jsfiddle #TXChetG updated
Using display:inline-block; http://jsfiddle.net/GCyrillus/hQ6Vw/2/
Using display:table/* table-cell*/;
http://jsfiddle.net/GCyrillus/hQ6Vw/3/
This should get you close:
<div>
<div style="background: grey; width: 15%; float:left"></div>
<div style="background: blue; width: 85%; float:left"></div>
</div>
Replace the grey background div with your image and the blue with your text.
Check this out
HTML:
<section>
<div id="one"></div>
<div id="two"></div>
</section>
CSS:
section {
width: 80%;
height: 200px;
background: aqua;
margin: auto;
padding: 10px;
}
div#one {
width: 15%;
height: 200px;
background: red;
float: left;
}
div#two {
margin-left: 15%;
height: 200px;
background: black;
}
Is this what you mean?
html
<div class="container">
<div class="images">
<img src="http://jsfiddle.net/img/logo.png" style="background-color:black">
</div>
<div class="text">
Example
</div>
</div>
<div class="container">
<div class="images">
<img src="http://jsfiddle.net/img/logo.png" style="background-color:black">
</div>
<div class="text">
Example
</div>
</div>
css
.container {
clear: both;
}
.images {
width: 15%;
float: left;
vertical-align: text-top;
}
.text {
width: 85%;
float: right;
vertical-align:text-top;
}
Why not just set the #text p display to display: inline or display:block; or use margins to align them?
<div id="quotes">
<div id="picture">
<img src="tom.jpg" />
</div>
<div id="text">
<p>"Christiaan was one of the stand out candidates throughout, therefore there was no hesitation in offering him a place on this highly sort after scheme..."</p>
</div>
</div>
Display the container div as table and the text and image divs as table-cell to make them the same heights. You can then centre the image vertically through vertical-align:middle.
#quotes {
display:table;
}
#picture {
width: 15%;
display:table-cell;
vertical-align: middle;
}
#text {
display:table-cell;
width:85%;
padding-left: 16%;
}
#picture img {
width: 100%;
}
http://jsfiddle.net/X3WsV/1/