Aligning Two Block Elements Horizontally Rather Than Manually Using "Position"

Question

I have a header and a "p" element that I want on one horizontal line. I've managed to obtain the desired result manually using CSS "position" function, but I would like to learn the proper way to do this so that both elements are mathematically aligned for future reference. I want the middle of each element to be on the same horizontal line, as one element has more height than the other. I tried using "display: inline-block" and that didn't work, perhaps because I have different margins set for each element but I'm not sure.

HTML:

    <div class="head-one">
        <h2 id="#about-me">About Me</h2>
        <p id="cal">My name is Cal Cook. I'm 26 years old and live in Boston, Massachusetts. I'm from NYC originally. I'm passionate about cryptocurrency, web design and SEO. I built this site to feature my work.</p>
    </div>

CSS:

h2 {
    padding: 75px;
    margin-left: 30px;
    font-family: 'Nunito Sans', sans-serif;
}

#cal {
    font-family: 'Roboto', sans-serif;
    border: solid;
    border-radius: 25px;
    padding: 10px;
    margin-left: 350px;
    margin-right: 250px;
    position: relative;
    bottom: 140px;
}

the duplicate I gave you show you all what you need to know in order to achieve the layout you want. No need to repeat the same question. Take the time to read them — Temani Afif, Apr 22 '20 at 20:43

score 0 · Answer 1 · answered Apr 22 '20 at 20:22

I would suggest removing all of your positing code. Use display: flex on the container and flex: 1 on the #cal element.

.head-one {
  display: flex;
  align-items: center;
}

h2 {
    font-family: 'Nunito Sans', sans-serif;
    white-space: no-wrap;
    padding: 75px;
}

#cal {
    font-family: 'Roboto', sans-serif;
    border: solid;
    border-radius: 25px;
    padding: 10px;
    flex: 1;
}

<div class="head-one">
  <h2 id="#about-me">About Me</h2>
  <p id="cal">My name is Cal Cook. I'm 26 years old and live in Boston, Massachusetts. I'm from NYC originally. I'm passionate about cryptocurrency, web design and SEO. I built this site to feature my work.</p>
</div>

score 0 · Accepted Answer · answered Apr 22 '20 at 20:22

0

It's a perfect situation (like almost every other) for CSS_layout/Flexbox

.head-one {
  display: flex;
  align-items: center;
  justify-content: space-around;
}

#cal {
  max-width: 60vw;
  border: solid;
  border-radius: 25px;
  padding: 10px;
}

<div class="head-one">
  <h2 id="#about-me">About Me</h2>
  <p id="cal">My name is Cal Cook. I'm 26 years old and live in Boston, Massachusetts. I'm from NYC originally. I'm passionate about cryptocurrency, web design and SEO. I built this site to feature my work.</p>
</div>

CSS_layout/Flexbox

answered Apr 22 '20 at 20:22

Roko C. Buljan

196,159
39
305
313

Awesome, I forgot about the flexbox function. Thank you! One quick question -- is it possible to adjust the elements on the same horizontal line in either direction? For example, if I wanted to move the right element closer to the left one? I tried setting "right: 10px" to the ID #cal as a test but it didnt' work – calcodes26 Apr 22 '20 at 22:04
@calcodes26 sure, use `justify-content: center;` instead; and than you can play with `#cal`'s `margin-left` – Roko C. Buljan Apr 22 '20 at 22:22

Aligning Two Block Elements Horizontally Rather Than Manually Using "Position"

2 Answers2

Linked