I need to vertically align the text into a div that have a certain height.
If you go here you can see my problem: http://onofri.org/example/example3/
As you can see I have a #titleBox div that contain the text: Promoting Investment in Agriculture
The #titleBox have a specific height that is 40px. I want vertically align the text in the green div in such a way that is at the center.
This is my HTML and CSS code but don't work well:
<div id="container">
<div id="titleBox">
<p id="myTitle">Promoting Investment in Agriculture</p>
</div>
</div>
#titleBox{
margin: 0 auto;
width: 350px;
background-color: #6da662;
height: 40px;
vertical-align: middle;
}
#myTitle{
/* consente di posizionare un elemento al centro del suo contenitore */
margin: 0 auto;
overflow: hidden;
color: #fff;
font-size: 16.5px;
font-weight: bold;
text-align: center;
}
What have I to do to solve?
Tnx
Andrea
Try to add these styles to #myTitle:
vertical-align: middle;
line-height: 40px;
Here's another solution - add these styles to your page.
You should definitely get familiar with the display:table-cell property for vertical centering.
#titleBox{
display:table;
}
#myTitle{
display:table-cell;
vertical-align: middle;
}
If you want to be really concise, you can do it all in one element:
<div id="titleBox">Promoting Investment in Agriculture</div>
and apply the following CSS:
#titleBox {
margin: 0 auto;
width: 350px;
background-color: #6da662;
line-height: 40px;
vertical-align: middle;
text-align: center;
color: #fff;
font-size: 16.5px;
font-weight: bold;
}
See fiddle: http://jsfiddle.net/audetwebdesign/2PxsZ/
Related
I'm trying to center a <p> tag within its container, and while I have been able (using the top/translateY) trick to center the tag itself, the center of the text is not actually the center of the <p> tag's content, as seen here (the red line is the true middle of the tag):
How can I center the text in the <p> tag as well ?
To center a <p> tag within its container, try to use a property of table.
Like, you have to set a property of parent container to display:table then set its child property to display: table-cell; and vertical-align: middle;
Check this fiddle here
Your Sample HTML should be like,
<div class="parent">
<div class="child">
<p>...... Your Text goes here .....</p>
</div>
</div>
And relative CSS should be like,
.parent {
width: 300px;
height: 200px;
background: blue;
padding: 30px;
display: table;
}
.child {
display: table-cell;
vertical-align: middle;
}
p {
display: block;
text-align: center;
color: #FFFFFF;
margin: 0px;
}
For your reference check this out
You can try to like this:
p.myclass {
font: bold 12px "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height: 10px;
height:30px;
margin: 0px;
display: table-cell;
vertical-align: middle;
padding: 10px;
bordeR: 1px solid #f00;
}
<p class="myclass">test</p>
HTML:
<div>
<p>Hello World</p>
</div>
CSS:
div {
width: 300px;
height: 100px;
background: red;
}
p {
text-align: center;
line-height: 100px;
}
Demo: https://jsfiddle.net/vv3uy7vy/
<p>Hi </p>
p{border:1px solid red; height:30px; line-height:30px;}
Assign the "height" of the container(here "p" tag) to line-height will make the content align vertically middle
you and so the text in the middle. visually it seems less because you are using lowercase letters, while the height of the text is calculated by uppercase.
I'm trying to line this logo and the text on the same line, but have the logo on the left hand corner of the site, and the text be centered. Here's what it looks like now and what the CSS and HTML is so far.
Here's my current code:
#title {
font-family: sans-serif;
text-align: center;
color: #E03DA7;
vertical-align: top;
display: inline;
align-content: right;
}
body {
align-content: center;
vertical-align: top;
margin: 0;
width: 100%;
height: 100%;
}
#navbar {
font-family: monospace;
font-size: 25px;
text-align: center
}
#mainpara {
text-align: left;
max-width: 300px;
max-height: 750px;
font-size: 20px;
vertical-align: middle;
font-family: sans-serif
}
img {
max-width: 100px
}
<img src="WOW_logo_RGB.jpg">
<h1 id="title">Welcome, to WOW Virtual.</h1>
<h3 id="navbar">About Us | Live Radar | Why Join?</h3>
<p id="mainpara">Welcome to WOW Virtual, a fresh new Virtual Airline for the Flight Simulator community. We offer only the best for our pilots, and strive to maintain the best service for any of our pilots. Interested? Join Today!</p>
You can achieve the desired results with Flexbox
If you contain your img and h1 in a container (say header), add the following CSS to the header tag
header {
display: flex;
align-items: center; /* align vertical */
}
Results can be found here, with your modified code: JSFiddle
Have the text and picture in one div with text-align centered. Then you can center the div itself if you want it to be in the center.
It's as simple as this:
#title, img {
vertical-align: middle;
}
#title {
display: inline;
}
<img src="https://placeimg.com/60/60/tech">
<h1 id="title">Welcome, to WOW Virtual.</h1>
<h3 id="navbar">About Us | Live Radar | Why Join?</h3>
Edit: If you want the text to be centered, you have to take another approach:
#header {
position: relative;
}
h1 {
line-height: 60px;
text-align: center;
}
#header img {
position: absolute;
height: 60px;
}
#navbar {
text-align: center;
}
<div id="header">
<img src="https://placeimg.com/60/60/tech">
<h1>Welcome, to WOW Virtual.</h1>
</div>
<h3 id="navbar">About Us | Live Radar | Why Join?</h3>
By using position:absolute on the img tag, you ensure that the h1 tag is centered to the full width of the page.
More of an hackish way, you can put the img and h1 into a div with class .header.
Then set the line-height of the div to the height of the image:
.header {
line-height:100px;
}
You can see the output here.
Normally with table tag, you can apply Vertical align property as middle for you table cells .
If you want to use the same property / behaviour for your div. Then use display:table-row to your parent (.header) and then display:table-cell to the child div around Logo and the text.
That would allow you to use vertical-align:middle.
check through the edit made by copying your initial code snippet. Let me know if you have any query
.header{
display:table-row;
}
.header > div{
display:table-cell;
vertical-align:middle;
}
#title {
font-family: sans-serif;
text-align: center;
color: #E03DA7;
vertical-align: top;
display: inline;
align-content: right;
}
body {
align-content: center;
vertical-align: top;
margin: 0;
width: 100%;
height: 100%;
}
#navbar {
font-family: monospace;
font-size: 25px;
text-align: center
}
#mainpara {
text-align: left;
max-width: 300px;
max-height: 750px;
font-size: 20px;
vertical-align: middle;
font-family: sans-serif
}
img {
max-width: 100px
}
<html>
<body>
<div class="header">
<div>
<img width="250" height="250" src="WOW_logo_RGB.jpg">
</div>
<div>
<h1 id="title">Welcome, to WOW Virtual.</h1>
</div>
</div>
<h3 id="navbar">About Us | Live Radar | Why Join?</h3>
<p id="mainpara">Welcome to WOW Virtual, a fresh new Virtual Airline for the Flight Simulator community. We offer only the best for our pilots, and strive to maintain the best service for any of our pilots. Interested? Join Today!</p>
</body>
</html>
This question already has answers here:
Vertically align text next to an image?
(26 answers)
Closed 7 years ago.
I want both the image and text centered horizontally and vertically. What is the best way to go about this? I have tried float but it doesn't seem to be working. See the above image for ideal result
HTML:
<div class="clearfix" id="one">
<img class="imac" src="imac.png">
<p1>
I want to work in Computer Design, changing the way people
interact with thoughtfully considered software and hardware
experiences.
</p1>
</div>
CSS:
#one{
background-color: #4E5B71;
width: 100%;
height: auto;
padding: 15px;
}
.clearfix{
overflow: auto;
}
p1{
font-family: AvenirNext-Regular;
font-size: 24px;
color: #FFFFFF;
line-height: 50px;
vertical-align: middle;
display: inline-block;
}
imac{
width: 100% auto;
height: auto;
float:left;
vertical-align: middle;
}
SOLUTION 1
Demo: https://jsfiddle.net/2Lzo9vfc/78/
HTML
<div class="clearfix" id="one"> <img class="imac" src="http://placehold.it/70x50"> <p> I want to work in Computer Design, changing the way people interact with thoughtfully considered software and hardware experiences. </p>
</div>
CSS
#one{
background-color: #4E5B71;
width: 100%;
height: auto;
padding: 15px;
display: table;
}
.clearfix{
overflow: auto;
}
p{
font-family: AvenirNext-Regular;
font-size: 16px;
color: #FFFFFF;
vertical-align: middle;
display: table-cell;
}
.imac {
vertical-align: middle;
display: table-cell;
}
SOLUTION 2 using flexbox
Demo: https://jsfiddle.net/2Lzo9vfc/81/
CSS
#one{
background-color: #4E5B71;
width: 100%;
height: auto;
padding: 15px;
display: -webkit-flex;
display: flex;
align-items:center;
}
.clearfix{
overflow: auto;
}
p{
font-family: AvenirNext-Regular;
font-size: 16px;
color: #FFFFFF;
}
The vertical-align property does not work in that context. It is a bit counter-intuitive but vertical-align will only effectively work in a table layout.
You have a few ways to solve your predicament, but on the topic of tables, it might not be a bad idea to use a table to assist with your alignment. For example, you could put create a table with one row <tr> and four table cells <td> and apply your vertical-align to the table cells. The image would be in cell two, and the paragraph in cell three. You would then apply the desired width to the cells to ensure correct horizontal alignment.
PS: There is no <p1> tag. You should be using just <p>.
To center the text, you should use text-align: center.
p1{
font-family: AvenirNext-Regular;
font-size: 24px;
color: #FFFFFF;
line-height: 50px;
display: inline-block;
text-align: center;
}
You can also use a paragraph to wrap the image and control it. You can use the same paragraph formatting as the text below it or give it its own class. Just make sure it also has text-align: center programmed in it.
<p1><img class="imac" src="imac.png" /></p1>
I have a vertical block of text that looks left-aligned like this:
T
e
x
t
See this demo for better visualisation.
How do I align it using CSS and without breaking up the text, so that the characters appear to be horizontally centered within the block?
Letter spacing adds the space to the right of the letter. So you've to add equal padding to the left for imitating center alignment.
Apply padding-left equal to the letter-spacing
div {
width: 1em;
word-wrap: break-word;
margin:0 auto;
background: cyan;
letter-spacing:0.5em;
padding-left:0.5em;
text-align:center;
}
JSFiddle
Update
Visual appearance can be tweaked by simply changing the values…
JSFiddle
What about this DEMO?
HTML
<div>
<div>T</div>
<div>e</div>
<div>x</div>
<div>t</div>
</div>
CSS
div {
background: cyan;
width: 1em;
line-height: 0.7em;
text-align:center
}
OR this one DEMO 2
HTML
<div>
T<br>
e<br>
x<br>
t<br>
</div>
CSS
div {
background: cyan;
width: 1em;
line-height: 0.7em;
text-align:center
}
Try this FIDDLE
div {
background: cyan;
width: 1em;
letter-spacing: 1em;
line-height: 0.7em;
word-wrap: break-word;
margin: 0 auto;
}
try this {demo}
div {
background: cyan;
width: 60px;
line-height: 0.7em;
text-align:center;
word-wrap: break-word;
padding:0 10px
}
I want to have a vertical centralized text.
But the problem is: When I increase the font-size, different browsers render a different font-family (font stack) and its not keep middle alignment.
http://jsfiddle.net/rpNnh/1/
Thanks!
see the solution in jsfiddle
In detail
Html code
<div>
<p>text+<br>sdffd</p>
</div>
<br/><br/>
Switch Font
CSS
div{
width: 200px;
height: 200px;
border: 1px solid black;
display: table; //added
}
p{
line-height: 20px; //changed
font-size: 18px;
text-align: center;
display: table-cell; //added
vertical-align: middle; //added
}
p.times{
font-family: "verdana"; //changed
}
You can vertically align a text in middle by placing this CSS on the div:
text-align: center;
display: table-cell;
vertical-align: middle;