I have the following CSS and HTMLcode:
CSS
.table{
display:table;
height:100%;
width:100%;
}
.table-cell{
display: table-cell;
vertical-align: middle;
}
HTML
<div class="table">
<div class="table-cell">
<a class="cta cta-1" href="#">Shop Now</a>
</div>
It centers the text vertically correctly on desktop, but I tried viewing it on my mobile (IPhone) and it doesn't work, the text is aligned to the top. Why would that be? You can see it here.
http://machinas.com/wip/stradviarius/startpage/
If your using fixed content that won't change you could do it using:
.table-cell{
display: table-cell;
margin-top:170px;
}
OR use line-height for the text (probably best):
.cta {
line-height:339.328px;
}
339.328px is from your div heights.
Note: Your website doesn't vertical center the text on my Chromebook, so I assume it isn't working.
Related
I'm struggeling a bit with the sharebuttons for social media (Twitter, Facebook, Google+) because the facebook button is a few pixels more down than the other two.
I have the feeling I tried everything in my knowledge, by adding or removing divs, margin, padding etc.
This is the HTML code:
<div class="sharebuttons">
<div class="sharebutton"><div class="fb-share-button " data-layout="button" data-mobile-iframe="false"></div></div>
<div class="sharebutton">Tweet</div>
<div class="sharebutton"><div class="g-plus" data-action="share" data-annotation="none"></div></div>
</div>
And the only CSS code from my part:
.sharebutton{
display:inline;
}
And the result is this:
You need to vertically align them. Since text is on top I suggest apply this css:
.sharebutton {
display: inline-block;
vertical-align: bottom;
}
this way all buttons will flow to bottom of line and align properly keeping text on top.
You can add just float:left and some width looking for your site:
.sharebutton {
display: inline-block;
float: left;
width:auto;
}
.sharebutton {
display: inline-block;
vertical-align: top; // or bottom as per your needs
}
I am vertically and horizontally center a div with the following markup/css:
.wrapper {
display: table;
}
.content {
display: table-cell;
vertical-align: middle;
text-align: center;
}
<div class="wrapper">
<div class="content">
centered content
</div>
</div>
My content looks fine when the browser is wide enough. However, I would like to somehow define a smaller width the content should stay within when resizing the width of the browser. I have text I don't want running into the right and left edge of the browser when it gets small enough, so I'd like to wrap it onto more lines. What is the best way to handle this responsively?
Try giving your wrapper a width and set margin to auto
MDN Link
.wrapper{ width:50%; margin:0 auto; }
I have a webproject using bootstrap.
There is an Layout with two columns. The left column has an image and the right one has an text. The text should be vertically centered to the image.
The first problem was to get the columns the same height.
I found the following working solution:
.col {
margin-bottom: -99999px;
padding-bottom: 99999px;
height:100%;
}
To get the text centered vertically I inserted the following html in the right row:
<div class="table">
<div class="cell">My text</div>
</div>
CSS:
.table {
height:100%;
width:100%;
display:table;
}
.cell {
display:table-cell;
vertical-align:middle;
height:100%;
}
But I don't get the table and its cell to height 100% of the parent. Position absolute not working too, because bottom:0 is 99999px;
Anybody has an idea what I can do? Thanks
I think that if you can do it, try to use flex-box instead of a fixed grid.
Here's your CodePen for an example: http://codepen.io/anon/pen/RaNYLG
HTML:
<div class="row">
<div class="column">
<p> Here you have some content.</p>
</div>
<div class="column">
<p> Here you can have a lot of text as well, but i will make longer since you need to understand how to vertically align your content. In this case you will see that the content being aliged will be the other. Take this just as an example.</p>
</div>
</div>
And CSS:
.row{
display:flex;
}
.column{
display:flex;
width:50%;
align-items:center;
}
(And to learn how to properly use the flex property: http://flexboxfroggy.com/)
I have two divs next to each other that are displayed using inline-block. As the viewport shrinks, I'd like the text in the leftmost div to wrap before the divs collapse vertically, but I can't seem to make that happen. JSFiddle here.
In the demo, when the viewport shrinks "Should stay in block" is pushed below the title block, whereas I'd like the "Lots of text I want to wrap" to start wrapping to keep the two blocks on the same line.
Use display: table-cell; Instead of display:inline-block will solve your issue.
.title {
display: table-cell;
vertical-align: top;
}
.box {
display: table-cell;
vertical-align: top;
}
<div class="title">
<h1>Hi</h1>
<h2>Lots of text I want to wrap</h2>
</div>
<div class="box">
Should stay in a block
</div>
Check your updated Fiddle Here.
Can't you make them to fill the body or the container giving them a 50% width?
JSfiddle
EDIT: JSfiddle with a wrapper
.title {
display: inline-block;
vertical-align: top;
background-color:red;
width:50%;
}
.box {
display: inline-block;
vertical-align: top;
background-color:blue;
width:50%;
}
<div class="title">
<h1>Hi</h1>
<h2>Lots of text I want to wrap</h2>
</div><div class="box">
Should stay in a block
</div>
Edit: remember to not wrap after the first div, and make sure that there are not spaces </div><div class="box"> so you can use 50% preserving the inline-block
I have lines of text varying from a couple words to a full sentence. I need that text centered horizontally, and most importantly, vertically.
CSS really needlessly fails at vertical centering (c'mon guys) but I found a solution that works in IE10 and Chrome, and it actually works in firefox too, but firefox pushes the div down below the container.
The html / css looks like:
<div style="position:absolute;">
<div style="position:relative;width:343.17em;height: 237.38em>
<svg for cloud />
</div>
<div style="position:relative;top:-210em;left:30em;width:240em;height: 180em;display: table-cell;vertical-align: middle;text-align: center">
<p style="text-align: center;display:inline-block">v-center me</p>
</div>
</div>
on Chrome and IE it looks like:
on FF it looks like:
EDIT:
here is a the fiddle showing the exact problem. view on chrome then FF.
http://jsfiddle.net/AwokeKnowing/PJJce/
I was able to get it to work in all 3 browsers by making the following changes to the CSS:
#text-wrap
{
position:relative;
top:-100px;
left:30px;
border:1px solid blue;
width:200px;
height:80px;
display:table; /* Changed to table instead of table-cell */
/* Removed: vertical-align: middle; */
text-align:center;
}
#text
{
text-align:center;
display:table-cell; /* Changed to table-cell instead of inline-block */
vertical-align: middle; /* Added vertical align */
}
Also, you're missing the closing tag on <div id="cloud">