2

So I have a section, which is divided into 2 parts. I want the text to be vertically centered and aligned to th left. I managed to vertically center one of my texts, but when I try to add more text, it just moves somewhere else instead of being positioned right on top of the other.

Current result:

My current design

HTML:

<section class="outer">
    <div class="col2">
        <h2>P E R F U M E</h2>
        <h1>Gabrielle<br> Essence Eau<br> De Parfum</h1>
        
        <p>A floral, solar and voluptuous<br> interpretation composed by<br> Olivier Polge, 
          Perfumer-Creator<br> for the House of CHANEL.
        </p>
    </div>
</section>

CSS:

.col2 {
    position: absolute;
    display: table;
    width: 350px;
    height: 600px;
    background-color: white;
    right: 0;
    text-align: left;
}


.col2 h1 {
    display: table-cell;
    vertical-align: middle;
    text-align: left;
    padding: 20px;
    height: fit-content;
    font-family: 'Fraunces';
}

Expected result:

Hoow I want it to look

I've tried using display: table for the container and display: table--cell for the text itself, which worked just fine with one div but not after adding some new text in another div in addition to te heading. I also tried something with line-height but it did something else than expected.

Tim Nikischin
  • 368
  • 1
  • 18
SteveTheReal
  • 21
  • 2

2 Answers2

2

you should consider using display: flex

See this example:

<!DOCTYPE html>
<html>

<head>
    <title>My First Web Page</title>


    <style>
        .outer {
            display: flex;
            flex-direction: row;
        }

        .col1 {
            width: 200px;
            height: 400px;
            background-color: red;
        }

        .col2 {
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
    </style>
</head>

<body>
    <section class="outer">
        <div class="col1">
            image here
        </div>
        <div class="col2">
            <h2>P E R F U M E</h2>
            <h1>Gabrielle<br> Essence Eau<br> De Parfum</h1>

            <p>A floral, solar and voluptuous<br> interpretation composed by<br> Olivier Polge,
                Perfumer-Creator<br> for the House of CHANEL.
            </p>
        </div>
    </section>

</body>

</html>

You can experiment using this tool:

CSS Flex Layout

Hope it helps!

Fabio Rotondo
  • 390
  • 2
  • 10
0

Consider learning more about flex box, justify content is the key property here, learn about flexible boxes here https://www.w3schools.com/css/css3_flexbox.asp

<section class="outer">
<div class="col2">
<h2>P E R F U M E</h2>
<h1>Gabrielle<br> Essence Eau<br> De Parfum</h1>     
<p>A floral, solar and voluptuous<br> interpretation composed by<br> Olivier Polge, Perfumer-Creator<br> for the House of CHANEL.
</p>
</div>
</section>
<style>
.outer {
display: flex;
flex-direction: row;
justify-content: center;
}
.col2 {
display: flex;
justify-content: center;
}
</style>
Lawrence
  • 1
  • 2