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
Related
Why won’t this section stay contained when I change my browser screen size? I used HTML and CSS. It looks fine when I made my screen full size but then if I make my browser smaller it doesn’t show the full content. (it only shows half of the image but shows the full text) screenshot of how it looks on smaller browser](https://i.stack.imgur.com/i9qiK.jpg)
.whoweare{
padding:80px 0px 50px;
background-color: #000000;
}
.whoweare .content {
-webkit-display: flex;
display: flex;
}
.whoweare .content .box{
padding:5px;
flex:0 0 100%;
max-width: 100%;
}
.whoweare .content .item-img {
width: 50%;
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
padding: 30px;
}
.whoweare .content .item-text h2{
font-size: 50px;
font-weight: 500;
margin:20px;
color: #ffffff;
padding: 0px 0px 20px;
}
.whoweare .content .item-text p{
font-size: 20px;
line-height:50px;
color:#ffffff;
margin:20px;
padding:0px 0px 20px;
font-family: 'Open Sans', sans-serif;
}
.whoweare .content .class-items .item{
margin-bottom: 30px;
display: flex;
}
.whoweare .content .class-items .item .item-text{
padding: 15px;
display: flex;
flex-direction: column;
justify-content: center;
}
` <section class="whoweare" id="whoweare">
<dic class="container">
<div class="content">
<div class="box text wow slideInRight">
<div class="class-items">
<div class="item wow bounceInUp">
<div class="item-img">
<img src="images/ACD68359-D3EB-4302-99C0-E59A663380AB.jpeg" alt="classes" width="601"
height="751" />
</div>
<div class="item-text">
<h2>Who we are</h2>
<p>Our gym provides a unique experience </p>
</div>
</div>
</section>````
Change the height width of img tags.
Use % parameters
for example
height=50%
width=60%.
I think 🤔 you need also change the height width of other container tags
If design is not look like good
You should add to all importan containers`
.container
{
width:100%:
height: auto;
margin: auto;
}
//Also can try
.container
{
width: auto;
padding: 0;
}
that should work...
Problem
img has specific width and height, hence it overflows even though its container (in your case .item-img has width:50%;).
Answer
Give the img of width: 100%; and object-fit: contain or object-fit: cover if you want it cropped.
I would like to have text inside the element to be aligned such that it begins from the bottom of the page. I want it so that as I increase or decrease the width of the div, the text fills up the bottom first before the top.
I want to look like the following design from adobe illustrator:
Instead, it looks like the following:
the code used in the second image is below:
<style media="screen">
*{
font-family: 'Heebo', sans-serif;
}
.big-intro-text{
font-size: 100px;
width: 100%;
position: absolute;
}
.big-intro-text div{
border: solid 1px green;
text-align: left;
color: gray;
max-width: 800px;
height: auto;
display: inline-block;
vertical-align: text-bottom;
}
</style>
<div class="big-intro-text" align = "center">
<div>home of the zebras</div>
</div>
* {
font-family: 'Heebo', sans-serif;
}
.big-intro-text {
font-size: 100px;
width: 100%;
position: absolute;
}
span {
display: block;
}
.big-intro-text div {
border: solid 1px green;
text-align: left;
color: gray;
max-width: 800px;
height: auto;
display: inline-block;
vertical-align: text-bottom;
}
<div class="big-intro-text" align="center">
<div><span>home<span> of the zebras</div>
</div>
Try this code.
You could add a large amount of margin on the top, and reduce the div height.
Sorry about the old answer, I did not understand the question.
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.
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)
I have a parent container(like a pop-up), in which I have a child element appended to parent container. The child element is a div which has some text. I want to center the text inside the div, so that the text remains center aligned in the child div, but the text should align itself vertically as it grows beyond 3-4 lines. I am able to align text vertically as it grows, but when it still is a small text it should be center vertically, which is not happening. I have tried lot of css properties in the child class.
Any help will be good.
.parentclass {
position: absolute;
top: 110px;
left: 165px;
width: 470px;
height: 260px;
text-align: center;
background-image: url(../images/Notification_BG.png); }
.childclass {
position: relative;
position: inherit;
width: 430px;
height: 192px;
left: 50%;
top: 50%;
margin-left: -215px;
margin-top: -96px; /* Negative half of height. */
text-align: center;
text-overflow: -o-ellipsis-lastline;
border: 1px solid blue;
font-family: Arial;
font-size: 28px;
color: white; }
Thanks
KK
have u used vertical-align:middle; ?
try this :
.childclass {
display: table-cell;
vertical-align: middle;
text-align: center;
}
This link will definitely help you:
vertically-center-text-in-a-100-height-div
Use your parentclass display as table and the childclass display as a table-cell and vertical-align:middle will work surely
html
<div class='parentclass'>
<div class='childclass'>Text which is more than two or three lines</div>
</div>
Css
.parentclass {
height: 260px;
text-align: center;
display:table;
}
.childclass {
vertical-align: middle;
width: 430px;
top: 50%;
text-align: center;
text-overflow: -o-ellipsis-lastline;
border: 1px solid blue;
font-family: Arial;
font-size: 28px;
color: black;
}
See this fiddle for demo