I am trying to design a mobile website. Need to get ABC middle vertically. I followed other SO questions reg how to get SPAN text vertically middle. But here its not working. I have included the jsfiddle. http://jsfiddle.net/3tdYT/ I am not sure what I am missing out.
<div id="main">
<div id="header">
<div id="logo"><img src="http://placehold.it/72x38"></div>
<div id="menu">a</div>
<div id="title-wrapper"><div id="title"><span id="screen-title">ABC</span></div></div>
</div>
<div id="company-name">CCCCCC</div>
</div>
* { margin:0; padding:0}
#header{
height:53px;
padding:0;
}
#logo{
float:left;
background: #ffffff;
padding:5px;
}
#title{
text-align:center;
height:100%;
margin:0 auto;
}
#title-wrapper{
height:100%;
background: #ff3eae;
}
#screen-title{
vertical-align: middle;
display: inline-block;
}
#menu{
width:20%;
height:100%;
float:right;
padding:0;
background: #E23222;
}
#company-name{
width:100%;
float:left;
background: darkblue;
clear:left;
padding:0px;
color: #ffffff;
text-align: center;
}
#main {width:240px}
Turn #title's display into a table and #screen-title's display into a table-cell:
/* ... */
#title{
display: table;
height:100%;
margin:0 auto;
}
/* ... */
#screen-title{
vertical-align: middle;
display: table-cell;
text-align: center;
}
http://jsfiddle.net/XMcCR/3/
But notice that there are lots of possibilitis to vertically center some text with css, each with its own specific disadvantages. This is just one possibility. Simply check some of the results of a quick Google search for "vertically center css". It almost appears to be some kind of own scientific field.
It seems that you have to set a static height and width for it.
That should work. have a try)
#screen-title{
display: table-cell;
height: 50px;
width: 200px;
text-align: center;
vertical-align: middle;
Add line-height: Xpx where X is a suitable value to get the effect you want (typically the same as the height of the element)
Related
I have content inside a <div> with nowrap property. I'm using flex box to align the content vertically and horizontally to be center.
Since I'm using nowrap property and fixed width to my <div>, my content overflow outside the container both x and y direction. I understand it will happen because of the property used.
My intention is if the content is too long to hold by the container it should be left aligned rather than center aligned and can overflow only in the Y direction.
I want solutions without adding an extra DOM. Is it possible.
div{
width:330px;
margin:0 auto;
height:50px;
border:1px solid #a7a7a7;
text-align:center;
display:flex;
justify-content:center;
align-items:center;
white-space:nowrap;
position:relative
}
<div>
Delete some content so that you can see it aligned properly
</div>
Also refer the fiddle below
Previously this was possible in display:-webkit-box since it has been deprecated i'm trying to find solution in flex. Refer here
Just change the justify-content to flex-start;:
div{
width:330px;
margin:0 auto;
height:50px;
border:1px solid #a7a7a7;
display:flex;
justify-content:flex-start;
align-items:center;
white-space:nowrap;
position:relative
}
<div>
Delete some content so that you can see it aligned properly
</div>
Update
As per your comment if you change the box to inline-flex, you can center the div and then set a max width on it so it is centered but then left-aligned when it hits the max width:
body {
text-align: center;
}
div {
max-width: 330px;
height: 50px;
position: relative;
margin: 0 auto;
display: inline-flex;
align-items: center;
white-space: nowrap;
position: relative
box-sizing:border-box;
}
div:after {
content: '';
display: block;
width: 330px;
height: 50px;
border: 1px solid #a7a7a7;
position: absolute;
left: 50%;
top: 0;
transform: translateX(-50%);
box-sizing:border-box;
}
<div>
Delete some content so that you can see it aligned properly
</div>
<br>
<div>
you can see it aligned properly
</div>
Hello everyone I have this set up to center some div based buttons but I'm having some visual glitches when centering text (it is not really centered):
#slide2
{
text-align: center;
text-align-last: center;
-moz-text-align-last: center;
}
#container2
{
height:100%;
}
.pagesContainer
{
width:100%;
height:50px;
top:0%;
}
.pageButtonContent
{
width: 38px;
height: 38px;
background-color:white;
border: solid 1px black;
-webkit-transition: all .5s;
-moz-transition: all .5s;
transition: all .5s;
display: inline-block;
font-family: 'Century Gothic', CenturyGothic, AppleGothic, sans-serif;
font-size: 20px;
color:darkgray;
border-radius: 50%;
}
.pageButtonContent:before {
content: '';
display: inline-block;
vertical-align: middle;
text-align: center;
height:42px;
}
.pagesContainer:before {
content: "";
display: inline-block;
vertical-align: middle;
height: 100%;
}
<div class='Slide' id='slide2' onscroll='changePosition()'>
<div id = "container2" class="containert">
<div id='' class='pagesContainer'>
<div id='previous' class='pageButtonContent'>
1
</div>
<div id='' class='pageButtonContent'>
2
</div>
<div id='' class='pageButtonContent'>
3
</div>
<div id='next' class='pageButtonContent'>
4
</div>
</div>
</div>
</div>
I know there are many different ways of doing it, but so far this set up is the only one that has worked, and I don't want to go back and try to explain all to stay in subject.
For some reason after applying css :before centered text appears to be kinda off. It looks like I manage to fix it vertically by setting a 42px height (its container is 50px high), but I haven't figure out how to fix it horizontally, do you guys and gals have any idea?
It appears that you don't really need :before to make it work.
You can add line-height to center the numbers vertically:
.pageButtonContent { line-height: 38px;}
I need to create this layout on HTML page using HTML5/CSS3/JS.
Please advise, how it can be achieved?
Colored rectangle should have some padding, caption should be aligned on the left, and decimal value should be aligned on center both vertically on horizontally. I've tried to achive this using tables, but how to do this using divs?
How I can scale font size for decimal value based on colored rectangle height&width?
It's very easy to center with flex-box
body {
font: normal 1em/1 sans-serif;
}
.box {
align-items: center;
background-color: #2db051;
color: white;
display: flex;
justify-content: center;
height: 220px;
position: relative;
width: 460px;
}
.box:before {
content: attr(data-caption);
font-size: 18px;
left: 20px;
position: absolute;
text-transform: uppercase;
top: 20px;
}
.box strong {
font-size: 80px;
}
<div class="box" data-caption="caption">
<strong>123</strong>
</div>
Flexbox needs to be prefixed before live (https://autoprefixer.github.io/).
you can use a single div with some css:
<div class="cont" title="caption">123</div>
.cont
{
position:relative;
width:300px;
height:200px;
line-height:200px;
text-align:center;
font-size:60px;
color:#FFF;
background-color:green;
}
.cont:before
{
content:attr(title);
font-size:18px;
position:absolute;
line-height:1em;
top:10px;
left:10px;
z-index:1;
}
you can play with it here: example in codepen.io(which is how you should post questions next time - better to play with existing code)
Check this out:
https://jsfiddle.net/3xrxz1oa/
HTML
<div id="container">123</div>
JS for calculate font size
var containter = document.getElementById("container");
containter.innerHtml = 'test'
var fontSize = parseInt(containter.clientHeight/2)+"px";
containter.style.fontSize = fontSize;
CSS style
#container {
height:200px;
width:90%;
background-color:#1CB254;
color: white;
padding:5%;
text-align: center;
}
#container::before {
content: "Caption";
font-size: 20px;
position: absolute;
top: 20px;
left: 20px;
}
I calculated the font size based on height. You can do more complex calculation.
So i'm trying to center a text in the middle of a div.
I looked half of the website, and it looks like i have to do smthg like that :
.container{
width:100px;
height:200px;
display:table-cell;
vertical-align: middle;
line-height: normal;
}
But it doesn't work...
Here's what i do :
HTML:
<div id="left_bot" class="menu_button"><span class="text_menu_button">Div1</span></div>
CSS:
.menu_button{
width:37%;
height: 44%;
text-align: center;
display: table-cell;
vertical-align: middle;
line-height: normal;
font-size: 48px;
}
#left_top{
top:0;
float:left;
background-color: red;
margin: 2% 1% 1% 2%;
}
But i still have the text in the center, but not in the middle of the div.
I don't get why, i tried to insert the vertical-align on a .text_menu_button but still nothing :x
Thx
The .container should have display: table; and .menu-bottom display: table-cell; to apply table like behavior with CSS.
HTML
<div class="container">
<div id="left_bot" class="menu_button"><span class="text_menu_button">Div1</span>
</div>
</div>
CSS
.container {
height:200px;
display:table;
width: 100%;
}
.menu_button {
text-align: center;
display: table-cell;
vertical-align: middle;
font-size: 48px;
}
demo: http://jsfiddle.net/ALB6D/1/
An easy way to center a text vertically is to set the line-height equal to the height.
div { font-size: 30px; line-height: 100px; height: 100px; }
Demo: jsFiddle
When it shows comment, it won't show the comment in the middle of vertical-align.
How can I make it shown in the middle of vertical-align?
This is current output. I want it right in the middle of vertical-align.
Javascript
function showComments(time){
var foundComments = findComments(time);
$.each(foundComments,function(i,comment){
$commentContainer.animate({"marginLeft":"400px","opacity":".0"}, 600);
setComment(comment.message);
$commentContainer.animate({"marginLeft":"0px","opacity":"1"}, 600);
});
};
CSS
div.newsticker{
border:1px solid #666666;
width:100%;
height:100px;
}
.newsticker p{
height:100px;
float:left;
position:absolute;
}
HTML
<div class="newsticker">
</div>
If its a single line. set the line height to the height of the div.newsticker eg 100px.
For example
font: 16px/100px 'arial', sans-serif
Just update below CSS3 rule to use "table-cell" and "vertical-align" as below:
div.newsticker{
border:1px solid #666666;
width:100%;
height:100px;
display: table-cell;
vertical-align: middle;
}
Also, you need to avoid position:absolute;
.newsticker p{
height:100px;
float:left;
position:absolute;
}
Try a div with display:table and then a div within with a display: table-cell where you want the text. That should vertical align, JS Fiddle is down, so I can't show you an example.
div.newsticker{
border:1px solid #666666;
width:100%;
height:100px;
display: table;
}
.newsticker p{
padding-left:10px;
padding-right:10px;
display: table-cell;
vertical-align: middle;
}
<div>
<span class="newsticker">
</span></div>
div {
border: 1px solid black;
}
span.newsticker {
border: 1px solid transparent;
}
.newsticker p {
margin: 50px;
vertical-align: middle;
}
http://jsfiddle.net/azHVv/22/