How can a text responsively aligned middle vertically within a div - javascript

I know how to vertically align a text center within a div when the height of text is known. Say the text's height is 20px.
Wrap the text with a span. Style div & span.
div {
position: relative;
}
span {
display: block
position: absolute;
top: 50%;
height: 20px;
margin-top: -10px;
}
Now I want to responsively align the text. What I want is the font-size of the text be in proportion to the height of the body. Say I have the following style:
body {
font-size: 100%;
}
span {
font-size: 1.5em;
}
Then I will change the font-size of body when the window size changed. In this situation, the height of the text is not determined. Then how to vertically align the text middle?
I know I can use JavaScript to dynamically change the height and margin-top of the span. But I have to do this after the window size changed. Then there is a chance that the window size changed, then the user see the the text not in the middle, then the JS code executed and the text jumped to the middle of the div. This may not be an acceptable solution.
I want to know if there is a pure CSS solution.
I guess I can use the following style to vertically align the text center.
div {
display: table-cell;
vertical-align: middle;
}
But with this solution, the margin of the div is not rendered properly. And the semantic is not right.
So is there a perfect solution?

Another purely CSS (CSS3) solution without table display properties would be to use the transform: translateY() property.
You'll need a container div and the inner span for you text:
HTML
<div id="container">
<span>Your Text</span>
</div>
CSS
#container{
position: relative;
}
#container span{
position: absolute;
top: 50%;
transform: translateY(-50%);
/* Your font-size CSS */
}
JsFiddle example:
https://jsfiddle.net/a0m4xnex/1/
You can use the same strategy for horizontal centering as well with translateX.

Helper Div can help you vertically align div
Works best for me, you can alter it accordingly
.DivParent {
height: 100px;
border: 1px solid lime;
white-space: nowrap;
}
.verticallyAlignedDiv {
display: inline-block;
vertical-align: middle;
white-space: normal;
}
.DivHelper {
display: inline-block;
vertical-align: middle;
height:100%;
}
<div class="DivParent">
<div class="verticallyAlignedDiv">
<p>Isnt it good!</p>
</div><div class="DivHelper"></div>
</div>

With flex box, you can do this: JSBIN
Essentially, here is the code (remember to add prefixes if needed):
html, body { height: 100%; margin: 0px; }
body {
display: flex;
justify-content: center; /* horizontal centering */
}
div {
align-self: center; /* vertical centering */
}
<body>
<div>Centered</div>
</body>

Related

How to get text within div to be relative to the div's width and height, CSS, HTML

I'm trying to get the text within a div to be relative to the size of the div, so that when you zoom in the text gets bigger along with the div, and when you zoom out the text gets smaller along with the div. For example, if you hit ctr and - at the same time on stackoverflow, and zoom out to 25%, you can see that the text shrinks along with the div, all the way to 25%, as oppose to just the text shrinking or just the div shrinking - they shrink at the same time. I'm trying to get something of that effect. Thanks.
div {
width: 50%;
height: 50%;
font-size: 12%;
}
<div> Text </div>
Try em based font-size show as below it will be relative.
Please check working example here.
body {
font-size: 16px; /* declare base font-size. */
}
div {
width: 50%;
height: 50%;
font-size: 1em;
}
Try the fiddle at
http://jsfiddle.net/meghanagpal/fgoyt0ze/1/
HTML
<div>some text</div>
CSS
html {
font-size: 100%; /* this is usually 16px by default*/
}
body { font-size: 0.75em; // 12px }
div {
width: 50%;
height: 50%;
font-size: 1em;
color:#ff0000;
}
and customize the fonts for the body and div as per your needs.

Button's text vertical and horizontal alignment issue

I have some buttons with text inside. What I'm trying to do is to align them to middle from vertical and horizontal.On the example I have 3 buttons (the left one is bigger in purpose)
When it a long text its placed on some rows on the middle of the button - it is not starting from the vertical middle but looks fine, but when I get short text it ("oneWord") then attached to the top side and all looks messy.
I read some exampels:
How do I vertically align something inside a span tag?
Button's text vertical align
How do I vertically align something inside a span tag?
vertical-align:middle for text in button
After all this I set my style to:
.spanContainer {
height: 70px;
}
.spanContainer span {
height: 70px;
display: table-cell;
vertical-align: middle;
white-space: normal;
}
After All the changes I'm getting those result:
On vertical side it is in middle(short and long text) - O.K, but on the horizontal for short text it start from the left side
The problem is that display: table-cell float it to left side for short text!
How can I create those buttons so even if I have one word or a long text they all will start on the middle of the button on horizontal and vertical?
Try the snippet below
CSS
.spanContainer {
height: 70px;
display: table;
width: 200px;
}
.spanContainer span {
background-color: #ff0000;
display: table-cell;
text-align: center;
vertical-align: middle;
}
Or don't use width on spanContainer, use some padding on the inner span instead
.spanContainer {
height: 70px;
display: table;
}
.spanContainer span {
background-color: #ff0000;
display: table-cell;
text-align: center;
vertical-align: middle;
padding: 0px 20px 0px 20px;
}
HTML
<span class="spanContainer">
<span>something</span>
</span>
First solution | Second solution

Adjust vertical position of different elements when display inline-block

I have a bunch of img elements that I want to display in a line inside a div. So I did something like this
css:
#imageContainer {
height: 90px;
padding-left: 50px;
padding-right: 50px;
text-align: justify;
text-justify: distribute-all-lines;
}
#imageContainer > img {
/*width: 150px;
height: 125px;*/
/*vertical-align: middle;*/
display: inline-block;
*display: inline;
zoom: 1;
}
#imageContainer:after {
content: '';
width: 100%;
display: inline-block;
font-size: 0;
line-height: 0;
}
html:
<div id="imageContainer">
<img class="imageOne" src="images/sample2.jpg" />
<img class="imageTwo" src="images/sample.jpg" />
</div>
This will make sure no matter how many img tag I put in the div it will be evenly distributed across the screen width. Now what I want to do is to be able to adjust vertical position of different elements. I tried to add padding in individual img tag but that will adjust the position of whole line. Is there a way to work around this?
JSFiddle: http://jsfiddle.net/g244H/
Update:
Found two solutions so far:
Don't use display inline block, use float and do something similar as Auto-growing margins when screen width get streched
But this means implementing a bunch of code to get the auto margin adjustment
With a bit of hack I have this work around, surround a div to each of img element and have display inline-block applied to div instead of img. Then in each div I can applied margin-top to adjust the height. JSFiddle link above is updated
position: relative;
top: the-amount-that-you-want-it-to-move;
Relative will make it appear to the other elements as if it's still where it was without it, but it's visible part will be moved according to top, bottom, left, and right.
For the images that you would like to raise and or lower you could do a.
margin-top:1em; margin-bottom:-1em
Add overflow:visible to the #imageContainer.
Also add position:relative; When ever positioning elements they need a position set and so does their parent.
#imageContainer {
position:relative;
height: 90px;
padding-left: 50px;
padding-right: 50px;
text-align: justify;
text-justify: distribute-all-lines;
overflow:visible
}
#imageContainer > img {
position:relative;
/*width: 150px;
height: 125px;*/
/*vertical-align: middle;*/
display: inline-block;
*display: inline;
zoom: 1;
}
The same amount you add you subtract for the opposite side.

How to align a website to the center of the screen top/bottom and right/left?

I want to have the effect like dropbox:https://www.dropbox.com/ where my website is centered in the exact middle of the page.
Achieving this effect is way more complicated than it should be. Here's a bare-bones working example: http://jsfiddle.net/JakobJingleheimer/UEsYM/
html, body { height: 100%; } // needed for vertical centre
html { width: 100%; } // needed for horizontal centre
body {
display: table; // needed for vertical centre
margin: 0 auto; // needed for horizontal centre
width: 50%; // needed for horizontal centre
}
.main-container {
background-color: #eee;
display: table-cell; // needed for vertical centre
height: 100%; // needed for vertical centre
// overflow: auto; // <- probably a good idea
vertical-align: middle; // needed for vertical centre
width: 100%; // needed for horizontal centre
}
.container {
background-color: #ccc;
padding: 20px;
}
If you want to achieve this:
Here are different methods, with the pros/cons of each one, for centering a page vertically. Choose which one you prefer:
http://blog.themeforest.net/tutorials/vertical-centering-with-css/
EDIT. As suggested, I will proceed to explain one of the methods. It only works if you already know the height/width of the element to center (the link includes more methods). Assuming all your content is within <body>, and that your content is 900px x 600px, you can do in your css:
html {
width: 100%;
height: 100%;
}
body {
width: 900px;
height: 600px;
position: absolute;
top: 50%;
margin-top: -300px; /* Half of the height of your body */
}
However, this falls short for dynamically generated content, since you don't know the height of it. I've used it succesfully on log-in box pop-up and settings pop-up.
Another method I've used in the past for the whole page is the Method 1 from the link. It makes a set of divs to behave as a table, which can vertical-align to the middle.
If you want to align it vertically center, please check this web page: http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
If you know the width and height of your page
then wrap your contents in following div css
.center
{
position:absolute;
top:50%;
left:50%;
margin-left: -(yourPageWidth/2);
margin-top: -(YourPageHeight/2);
}
On your topmost div give margin:0 auto 0 auto; Also define some width to that div.
First create a main container of the desired width and then put all your code inside the main container. For Eg.
<body>
<div id="container">
......... your code
</div>
</body>
And in the css
#container{
width: 700px ;
margin-left: auto ;
margin-right: auto ;
}
You can change the width as per your needs
<body>
<div class="container">
......... your code
</div>
</body>
#container{
width: 700px ;
margin:0 auto ;
padding:0px;
}
Try this:
html
<span id="forceValign"></span><!--
--><div id="centerMiddleWrap">
<div id="centered">Hello this is some text. Hello this is some text. Hello this is some text.</div>
</div>
CSS
html {
height: 100%;
background: #eee;
}
body {
margin: 0;
height: 100%;
/*important*/
text-align: center;
}
#centerMiddleWrap {
/*important*/
display: inline-block;
vertical-align: middle;
}
#forceValign {
/*important*/
height: 100%;
display: inline-block;
vertical-align: middle;
}
#centered {
background: #000;
color: #fff;
font-size: 34px;
padding: 15px;
max-width: 50%;
/*important*/
display: inline-block;
}
Here is an demo
Wrap a div and define its width, use margin:0 auto for centering the div.
You can check a site's CSS by using Firebug or browser extensions.

Centering Dynamic width Divs

I have a page that has 2 columns. The first column is a dynamic width. It contains a bunch of tabular data in tables. The 2nd column is a fixed width full of navigation stuff.
The 2 columns are divs with float left. I need to accomplish 2 things.
I need to center the 2 divs on the page. For example, if the first div is 600px wide as dictated by the data inside of it and the second div is a fixed 200px, the centering point is 400px.
I don't want the 2nd div to wrap down if the browser window is resized.
I'm thinking that I may have to nest the 2 divs inside of another div, set the parent div width using javascript, then center it.
I created this fiddle to help illustrate. http://jsfiddle.net/darthg8r/uhKdt/
Surround them with a div and set its style to:
width: ( whatever you need )
margin: 0 auto; // this centers the div
You can set the width dynamically with JavaScript if needed. As long as it's smaller than 100% of the surrounding container, it will stay centered.
You could achieve this with the following code:
HTML:
<div id="wrapper">
<div id="container">
<div id="variable">test</div>
<div id="fixed">test</div>
</div>
</div>
CSS:
#wrapper { overflow: hidden; }
#container {
float: left;
position: relative;
left: 50%; }
#container > div {
float: left;
position: relative;
right: 50%;
height: 300px; }
#variable {
background: red;
width: 300px; }
#fixed {
background: blue;
width: 200px; }
Preview: https://jsfiddle.net/Wexcode/mreLt/
You could also achieve this effect by wrapping the two elements in a container, setting them both to display: inline-block, and finally setting their container to have text-align: center.
The answer is a little more complicated than this, so let me know if you want to choose this route instead.
To make it so the elements don't fall to the next line, use inline-block.
<div id="container">
<div id="variable">
<p>test</p>
</div><div id="fixed">
<p>test</p>
</div>
</div>
CSS:
body { margin: 0; }
#container {
color: #fff;
text-align: center;
white-space: nowrap; }
#container > div {
height: 300px;
display: inline-block; }
#variable {
background: red;
width: 100px; }
#fixed {
background: blue;
width: 200px; }
Preview: https://jsfiddle.net/Wexcode/mreLt/2/

Categories