i want my "body2" div in the center of the page and paragraph float left. but my code apply center align property on both dive.
i have used float left for para in CSS but no solution.
<div class="row body2" align="center">
<div class="writing">
<div class="date">13.01.15</div><br>
<div class="heading">My biggest audio project ever.</div>
<div class="container-fluid">
<div class="para">The complete setup took about 6 hours. We were extremely contended with the result taken into the account of everything is new. A late
</div><br><br>
</div>
</div>
</div>
CSS: i am using text-align:left to make my paragraph left align, but it show center aligned.
.body2
{
background-color: black;
margin-top: -10px;
margin-left: auto;
margin-right: auto;
}
.writing
{
margin-top:64px ;
margin-left: 88px;
padding-bottom: 50px;
}
.date
{
color: #716558;
font-family: myrid Pro;
font-size: 20px;
}
.heading
{
font-family: georgia;
font-size: 36px;
}
.para
{
margin-top: 40px;
line-height: 170%;
text-align:left;
}
if you wanna align div in to the middle of page,
.body2{ width: 500px; margin: 0 auto;}
This will align your div in to the center of your page, change the width depend on your requirement.
to align text to left
.para{text-align:left;}
user this line, it should work good luck
You can done by set the div margin auto .body2{margin:0 auto;text-align:left} and remove align="center" from <div class="row body2" align="center"> that cause your text is center, or set div body2 position absolute .body2{position:absolute; width: 300px; left: 50%; margin-left:-150px} that style will bring your div in the center of the page, hope that will help you
The align property acts as text-align in this case. Instead, you can give your .body2 a non-auto width and apply margin: auto; to center the wrap: JS Fiddle
.body2 {width: 70%; margin: auto;}//can also apply max-width
The complete setup took about 6 hours. We were extremely contended with the result taken into the account of everything is new. A late
Related
I am struggling centering content vertically. Here is a screenshot:
I need a float left as there will be more content on the side which you can't see but yeah how can I get this text to vertically be in the center? Also I am not sure if I do need a tag in the tag
.newsletter_text_section {
width: 40%;
float: left;
padding: 15px;
font-size:24px;
padding-right: 0 !important;
display: inline-block;
height: 100%;
vertical-align: middle;
}
.newsletter_text_section p {
font-size:24px !important;
display: inline-block;
vertical-align: middle;
}
<!-- newsletter section -->
<div class="newsletter_section">
<div class="newsletter_text_section">
<p>Join Balance and get 20% off your first order</p>
</div>
<div class="newsletter_gif_section">
...
</div>
<div class="newsletter_input_section">
...
</div>
</div>
To solve this, the faster way is to set the same pixel for height and line-height of the element. Like this:
.box{
height : 10vh;
line-height: 10vh
}
Otherwise, you can also display: flex to layout your page, in flex scope, you can use align-item to align element vertically like this :
.box {
display: flex;
align-items: center;
justify-content: center;
}
For more detailed information, you can refer to here.
The next method is to adjust padding to your parent element since you are using the percent unit, but I don't recommend this way due to it exist side-effect sometimes.
The above content is what I think so now, hope it can help you.
Add This To The Style Of The Element:
position: absolute;
top: 50%;
Thanks,
Kamesta
I want to center a DIV within a parent DIV. I have tried using the recommende dsolution on SO -- How to horizontally center a <div> in another <div>?, but its not centering it. The basic layout is this
#revealScoreMobile {
padding: 10px;
display: block;
text-align: center;
width: 100%;
}
.stats {
text-align: center;
width: 100%;
background-color: red;
margin: 0 auto;
}
<div id="revealScoreMobile">
...
<div class="stats" style="">
<div class="score">5.0</div>
(<span class="votesCast">1</span> votes cast)
</div>
</div>
and yet as you can see from the Fiddle -- https://jsfiddle.net/5Lgu0uw3/2/, the child DIV is not centering within the parent, despite the fact I have
text-align:center;
in there. What gives? What else do I need to do to center that DIV within its parent?
I am not completely sure what you want, but if you want the inner DIV NOT have the full width, but only as much as its text contents require, make it an inline-block and erase the widthsetting (or give it a widthsetting less than 100%). inline-blocks are affected by text-align: center
(note that I erased some superfluous settings, but put the ... content into its own DIV, since it otherwise would be on one line with the subsequent inline-block.
#revealScoreMobile {
padding: 10px;
text-align: center;
}
.stats {
display: inline-block;
text-align: center;
background-color: red;
}
<div id="revealScoreMobile">
<div> ... </div>
<div class="stats" style="">
<div class="score">5.0</div>
(<span class="votesCast">1</span> votes cast)
</div>
</div>
As others have suggested in the comments, text-align: center; only applies to text content, not the inner div.
Your CSS applies width: 100%; to .stats which is forcing it to take up the full width of it's parent container #revealScoreMobile, which is also width: 100%;. Secondly it needs display: inline-block; to override the previous display: table-cell; as present in your jsfiddle example.
Replace in your CSS:
.stats {
display: inline-block;
text-align: center;
background-color: red;
margin: 0 auto;
}
I used the line-height property so that the inner text of my div would be vertically aligned:
div.header
{
background-color: #00325f;
height: 50px;
padding: 0px;
min-width: 880px;
line-height: 25px;
}
Hence, the 00011101010000110101010 from the following should be in the middle of the div in which it resides.
<div class="header">
<p>00011101010000110101010</p>
</div>
But when I preview my page, it's up at the top of the div like usual. Can someone help me resolve this issue and explain the HTML logic behind the issue?
Your line-height should be 50px not 25px to vertically center the text.
div.header
{
background-color: #00325f;
height: 50px;
padding: 0px;
min-width: 880px;
line-height: 50px;
}
The line-height should be the same height as the container itself.
Here is a fiddle: http://jsfiddle.net/7eZGe/
I am practising with making a webpage responsive for mobile screen resolutions. I succeeded with the width. How do I manage this with height? My wrappers continues to stay on top instead of vertical align.
I've seen a lot of questions about this problem, but couldn't find a solution specified on my css yet. Hope someone can help me out.
HTML
<body>
<div class="wrapper">
<div class="header">
</div>
<div class="content">
<div id="topleftbox"></div>
<div id="toprightbox"></div>
<div id="bottomleftbox"></div>
<div id="bottomrightbox"></div>
</div>
</div>
CSS
body {
}
.wrapper {
margin: 0 auto;
width: 100%;
height: 100%;
}
.header {
min-width: 50%;
height: 20px;
}
.content {
min-width: 500px;
width: 40%;
height: auto;
margin: 0 auto;
}
#topleftbox {
background: url(..);
background-repeat: no-repeat;
width: 229px;
height: 228px;
float: left;
}
#toprightbox {
background: url(...);
background-repeat: no-repeat;
width: 229px;
height: 228px;
float: right;
}
etc.
To use display:table-cell; you need to simulate the full table structure. Luckily you won't have to add any extra markup since you can style against the html and body tags:
html{display:table;width:100%;height:100%;}
body{display:table-row;}
.wrapper{
display:table-cell;
vertical-align:middle;
text-align:center;
}
Note: this vertically centers .wrapper's content, not the div itself.
You could use display:table to render your DIVs like tables and table cells.
More here: http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
Unlike with centering horizontally there never has been a CSS way to center vertically. The only way is to use javascript to grab the "window.innerHeight" then add the height of the HTML element (wrapper) to it and divide the total in half. And set that as the new top position.
Also your "wrapper" has a height of 100% this should mean it fills the entire screen height. It will not center if it is the same height as the screen. Also it has a width of 100%, I doubt the "margin: 0 auto" is doing anything.
Vertical align within CSS has a few options:
1. Via table-cell. (This does work in IE8+)
{
display:table-cell;
vertical-align:middle;
}
2. line-height = height of element (If you have more than one line of text this will look funky I imagine)
{
height:10em;
line-height:10em;
}
There are more options you can find, but I believe display: table should be your best bet nowadays.
http://www.zann-marketing.com/.../vertically-centering-text-using-css.html
https://stackoverflow.com/questions/2939914/
it's my first question here, while i solved many problems in any area reading other's solutions, but this time i have no luck, i keep trying and googling.
I am working with something i'm not very skilled, CSS. I want to center a box made of an image with a paragraph of text next to it (two rows of text - no more), the text is aligned to the left of the image.
|------------------------------------ NOW ------------------------------------|
|img|BIG TITLE
|img|smaller subtext
|----------------------------- <-- CENTERED----> -----------------------------|
|img|BIG TITLE
|img|smaller subtext
I tried to put everything in a div, but since the width of the DIV depends on the length of the text, and since it changes depending on the page's title, i can't set a fixed width.
Here is my HTML:
<div class="container">
<div class="row">
<div class="header">
<p class="small">
<img class="ok" src="ok.png">
<span class="bigtitle">TITLE</span>
<br><span style="text-align:left">subtext</span></p>
</div>
</div>
and here is my CSS:
.row .header {
width: 100%;
}
img.ok {
top: 15px;
}
p.small {
color: #000000;
font: bold 12px arial,helvetica,sanserif;
display: block;
}
span.bigtitle {
color: #679819;
text-transform:uppercase;
font: bold 42px arial,helvetica,sanserif;
}
text-align: center;
Then i tried:
putting everything in a paragraph and text-align: center;
setting Margin 0px auto to the paragraph;
putting everything in a div and tried centering but i don't know its width
googled and searched for solutions here...
Nothing works, i can't center the block, please help :-)
Thanks in advance
You could float and relatively position the containers like this:
.container {
overflow: hidden;
}
.row {
position: relative;
left: 50%;
float: left;
}
.header {
position: relative;
left: -50%;
float: left;
}
If you have more content in the container div than just this centered bit, you might wrap the centered bit in another div and move the overflow: hidden rule out of .container and to that div instead.