This question already has answers here:
What are the default margins for the html heading tags (<h1>, <h2>, <h3>, etc.)?
(4 answers)
What is the default padding and/or margin for a p element (reset css)?
(5 answers)
Closed 2 years ago.
I'm currently trying to figure out how to align the top of text for two div boxes. The wrapper div is one box and within that I have two other div boxes inside that are beside one another. I want the top of the header text to align with the top of the paragraph text (photo attached). The code below is what I have right now, and the image attached is what I'm wanting. I've tried 'vertical-align:top' but it's not working. Any ideas?
What I want
.wrapper {
display: inline-flex;
width: 100%;
}
#box1, #box2 {
vertical-align: top;
}
#box1 {
background: #00FFFF;
width: 35%;
text-align: right;
}
#box2 {
background: #FF00FF;
width: 65%;
}
<div class="wrapper">
<div id="box1">
<h1>Header</h1>
</div>
<div id="box2">
<p>Paragraph goes here</p>
</div>
</div>
just remove the margin on h1
.wrapper {
display: inline-flex;
width: 100%;
}
#box1, #box2 {
vertical-align: top;
border:solid 1px black;
}
#box1 {
background: #00FFFF;
width: 35%;
text-align: right;
}
#box2 {
background: #FF00FF;
width: 65%;
}
h1{margin:0;}
<div class="wrapper">
<div id="box1">
<h1>Header</h1>
</div>
<div id="box2">
<p>Paragraph goes here</p>
</div>
</div>
Related
This question already has answers here:
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
How can I vertically align elements in a div?
(28 answers)
Closed 1 year ago.
This is part of the code for a website template I developed a few years ago:
.container {
display: block;
border: 3px;
}
.infosp1 {
display: table;
width: 700px;
margin-bottom: 20px;
margin-top: 20px;
bottom: 30px;
}
.infosp1 div:nth-child(2) {
display: table-cell;
text-align: left;
}
div:nth-child(3) p {
width: 90px;
height: 200px;
margin-top: -10px;
}
div img {
height: 86px;
}
.infosp2,
.infoprice {
display: table-cell;
columns: 2;
padding: 20px;
color: #FFF;
background-color: red;
}
.caravanprice {
width: 50px;
font-weight: 800;
text-align: right;
}
<div class="container">
<div class="infosp1">
<div class="infosp2">Hotel de Paris</div>
<div class="infoprice">€200</div>
</div>
<div class="infosp1">
<div><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ef/H%C3%B4tel_Ville_Paris.jpg/1200px-H%C3%B4tel_Ville_Paris.jpg"></div>
<div>
<p>This Paris hotel has everything you need</p>
</div>
</div>
<div class="infosp1">
<div class="infosp2">Hotel de Paris</div>
<div class="infoprice">€200</div>
</div>
<div class="infosp1">
<div><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/76/Hotel_Paris.jpg/1200px-Hotel_Paris.jpg"></div>
<div>
<p>This Paris hotel was excellent value</p>
</div>
</div>
</div>
The template works, but the text does not align evenly with the images, it's right at the bottom of the div after div.infosp1.
I tried margin-top with -10px; did not work at all.
I could use tables but I've got the header to work how I needed it to.
My biggest problem is trying to get everything to align evenly, and margin-top didn't work.
This relates to DIVs within the container element of a DIV.
As it is, this is a template that I'm testing which works OK but would really appreciate some help to get this looking and working better.
One way to fix it is to add vertical-align to the div that contains a caption. Using flexbox will be even better.
<div class="caption-container">
<p>This Paris hotel was excellent value</p>
</div>
.caption-container {
vertical-align: middle;
}
This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
How can I vertically align elements in a div?
(28 answers)
Flexbox: center horizontally and vertically
(14 answers)
Closed 3 years ago.
I am trying to create a promotion where a picture is on the left and text on the right. How would I vertically center the text so that it appears in the middle of the photo? I have tried using margin and vertical-align, but they did not work.
In addition, why does the div with the text not appear on the same line as the div with the image, even though their widths are both set at 50%?
Here is my HTML and CSS:
.main-promotion .image {
display: inline-block;
vertical-align: top;
width: 50%;
height: 100%;
}
.main-promotion img {
width: 100%;
}
.main-promotion .description {
display: inline-block;
text-align: center;
width: 50%;
height: 100%;
font-size: 2vw;
}
<div class="main-promotion">
<div class="image">
<img src="https://images.newscientist.com/wp-content/uploads/2019/01/14144335/art-800x533.jpg" alt="Image Here">
</div>
<div class="description">
<h3> Get access to the morning routine used by world-class performers for FREE! </h3>
<p> We'll send it to you immediately! </p>
<button> Click me! </button>
</div>
</div>
Thank you in advance for your help!
See Flex display, with align-items:center;
.main-promotion{
display: flex;
align-items: center;
}
You can then also remove inline-block and vertical-align properties from your children properties.
Add css attribute position and float:
.main-promotion .image {
display: inline-block;
vertical-align: top;
width: 50%;
height: 100%;
position:relative; float:left
}
.main-promotion img {
width: 100%;
}
.main-promotion .description {
display: inline-block;
text-align: center;
width: 50%;
height: 100%;
font-size: 2vw;
position:relative; float:left
}
<div class="main-promotion">
<div class="image">
<img src="https://images.newscientist.com/wp-content/uploads/2019/01/14144335/art-800x533.jpg" alt="Image Here">
</div>
<div class="description">
<h3> Get access to the morning routine used by world-class performers for FREE! </h3>
<p> We'll send it to you immediately! </p>
<button> Click me! </button>
</div>
</div>
Sounds like you need display: flex on your parent div.
And then alter the size of the img a bit.
https://codepen.io/raqem/pen/BgpYwj
I want to horizontal align a div that consists of two other divs:
One from the left, that will contain an image.
Other from the right, that div will contain text, aligned to the left.
The alignment will be relative to a container, and the centered div should expand to a maximum width (and not take the entire container's width).
This pen describes what i tried to do using table layout
This is the HTML
<div class="container">
<div class="centered">
<div class="left">
left text
</div>
<div class="right">
very very very long right text
</div>
</div>
</diV>
And the CSS
.container {
width: 200px;
background-color: red;
}
.centered {
display: table;
margin: 0 auto;
max-width: 100px;
}
.left {
background-color: green;
display: table-cell;
vertical-align: middle;
}
.right {
background-color: blue;
display: table-cell;
vertical-align: middle;
}
As you can see, the space on the right of the blue area is part of the centered div (the green+blue area), but it makes the div's content not to be centered. What i would like is the blue area to take the width of the longest line in it
If you're wanting the blue area to dynamically grow with the text inside of it while retaining a centered area of content would the following be what you're looking for?
.container {
width: 200px;
background-color: red;
padding:0 20px;
}
.centered {
display: table;
margin: 0 auto;
max-width: 100px;
}
.left {
background-color: green;
display: table-cell;
vertical-align: middle;
color:#fff;
}
.right {
background-color: blue;
display: block;
vertical-align: middle;
width:inherit;
color:#fff;
}
<div class="container">
<div class="centered">
<div class="left">
left text
</div>
<div class="right">
very very very long right text very very very long right textvery very very long right textvery very very long right textvery very very long right textvery very very long right text
</div>
</div>
</div>
This question already has answers here:
Align two inline-block div with content
(2 answers)
Closed 7 years ago.
Desired result: The two divs with class inline should be on the same horizontal level (the second one contains two other divs with some content).
However, as can be seen below, the two divs are not aligned vertically. If I remove the content (the word "text") from both the .inside divs, they line up as expected.
How can I make them line up? What is causing this?
.inline,
.inside {
margin: 0;
padding: 0;
width: 100px;
height: 100px;
}
.inline {
display: inline-block;
background-color: chartreuse;
}
.inside {
height: 48px;
background-color: salmon;
border: solid 1px black;
}
<div class="inline">
</div>
<div class="inline">
<div class="inside">text</div>
<div class="inside">text</div>
</div>
<hr>
<div>Without content (i.e. the word "text"):<div>
<div class="inline">
</div>
<div class="inline">
<div class="inside"></div>
<div class="inside"></div>
</div>
.inline {
vertical-align: top;
}
Thanks everybody.
UPDATE: The answers have got me close, but they still don't align vertically as the text div is larger, how can I make them both the same height and therefore align?
I would like to have two DIVs next to each other, one containing an image and one containing text, both sitting in a container DIV.
The image should be 15% of the width of the container div, with the text using the remaining 85%
The image and text should be aligned vertically within their respective DIVs, so it looks like they are aligned with each other.
I've tried to work this out but can't seem to do it! Can anyone help?
#picture {
float: left;
width: 15%;
line-height: auto;
}
#text {
width: auto;
padding-left: 16%;
line-height: auto;
vertical-align: middle;
margin-top: auto;
margin-bottom: auto;
}
#text p {
display: inline-block;
vertical-align: middle;
line-height: normal;
}
and
<div id="quotes">
<div id="picture">
<img style="width: 100%; vertical-align: middle" src="tom.jpg" >
</div>
<div id="text">
<p>"Christiaan was one of the stand out candidates throughout, therefore there was no hesitation in offering him a place on this highly sort after scheme..."</p>
</div>
</div>
Here's a fiddle with your code in it: http://jsfiddle.net/hQ6Vw/1/
The only changes I made was to assign matching top/bottom margins to the img and p tags. I think that will give you the effect you're looking for.
If you use float and verticl-align, those two won'nt work together.
Float extract itself from regular flow and go slide on one side or the other on top of next line right after any content within the regular flow.
Vertical-align works:
in betweem inline-boxes (inline-block-level element or displayed so with display:inline-block;)
inside td or it's CSS default display : display:table-cell;
here jsfiddle #TXChetG updated
Using display:inline-block; http://jsfiddle.net/GCyrillus/hQ6Vw/2/
Using display:table/* table-cell*/;
http://jsfiddle.net/GCyrillus/hQ6Vw/3/
This should get you close:
<div>
<div style="background: grey; width: 15%; float:left"></div>
<div style="background: blue; width: 85%; float:left"></div>
</div>
Replace the grey background div with your image and the blue with your text.
Check this out
HTML:
<section>
<div id="one"></div>
<div id="two"></div>
</section>
CSS:
section {
width: 80%;
height: 200px;
background: aqua;
margin: auto;
padding: 10px;
}
div#one {
width: 15%;
height: 200px;
background: red;
float: left;
}
div#two {
margin-left: 15%;
height: 200px;
background: black;
}
Is this what you mean?
html
<div class="container">
<div class="images">
<img src="http://jsfiddle.net/img/logo.png" style="background-color:black">
</div>
<div class="text">
Example
</div>
</div>
<div class="container">
<div class="images">
<img src="http://jsfiddle.net/img/logo.png" style="background-color:black">
</div>
<div class="text">
Example
</div>
</div>
css
.container {
clear: both;
}
.images {
width: 15%;
float: left;
vertical-align: text-top;
}
.text {
width: 85%;
float: right;
vertical-align:text-top;
}
Why not just set the #text p display to display: inline or display:block; or use margins to align them?
<div id="quotes">
<div id="picture">
<img src="tom.jpg" />
</div>
<div id="text">
<p>"Christiaan was one of the stand out candidates throughout, therefore there was no hesitation in offering him a place on this highly sort after scheme..."</p>
</div>
</div>
Display the container div as table and the text and image divs as table-cell to make them the same heights. You can then centre the image vertically through vertical-align:middle.
#quotes {
display:table;
}
#picture {
width: 15%;
display:table-cell;
vertical-align: middle;
}
#text {
display:table-cell;
width:85%;
padding-left: 16%;
}
#picture img {
width: 100%;
}
http://jsfiddle.net/X3WsV/1/