Html - Position a title and message in the centre, whilst postioning a sub message at the start

coderoftheday
June 21, 2023
275 views
0 votes
2 Answers

I’m trying to position a title in the centre and a message which will start from the same x axis point as the title, whilst positioning a sub message from the start on the left:

I’ve tried the following CSS, but the two messages just stay close together, and the second message does not align with the title

.container{
    display: flex;
    justify-content: center;
}

.divForSubMessageAndMessage{
    display: flex;
    justify-content: flex-start;
}

.message{
    justify-self: center;
    align-self: center;
}

<div className="container">
    <h1>Title</h1>
    <div className="divForSubMessageAndMessage">
        <p className="subMessage">subMessage</p>
        <p className="message">Message</p>
    </div>
</div>

Tags: css html

Answers

A grid is much better suited than a flexbox for managing the overall layout of this particular design.

body {
  font-family: sans-serif;
  margin: 2em 0;
  background: #f4f4f4;
}
.container {
  padding: 1em;
  background: silver;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1em 0;  
}
.title {
  grid-row: 1;
  grid-column: 2;
}
.message {
  grid-row: 2;
  grid-column: 2;
}
.subMessage {
  grid-row: 2;
  grid-column: 1;
}
.title, .message, .subMessage {
  background: #f4f4f4;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
}
.title, .subMessage {
  width: 50%;
  height: 4rem;
}
.message {
  height: 12rem;
}

<div class="container">
  <h1 class="title">Title</h1>
  <p class="message">Message</p>
  <p class="subMessage">Sub message</p>
</div>

This cannot be done only with css. In addition, when using javascript, it is important to take into account the nuances – such as, for example, the width of .title. Here is an example for you as a starting point:

position();
window.onresize = position;

function position() {
  const title = document.querySelector('.title');
  const titleWidth = document.querySelector('.title').offsetWidth;
  const subMessage = document.querySelector('.sub-message');
  const content = document.querySelector('.content');
  const gap = 16; // grid-gap
  subMessage.style.removeProperty('margin-right');
  content.style.removeProperty('margin-left');
  if (titleWidth < subMessage.offsetWidth) {
    subMessage.style.marginRight = titleWidth / 2 + gap / 2 + 'px';
    content.style.marginLeft = titleWidth / -2 - gap / 2 + 'px';
  }
}

* {
  box-sizing: border-box;
  margin:  0;
}

body:before {
  content: '';
  width: 1px;
  height: 100vh;
  inset: 0 auto 0 50%;
  position: fixed;
  background-color: green;
}

.grid {
  display: grid;
  grid-template-columns: auto 1fr 1fr auto;
  grid-gap: 16px;
  padding: 16px;
}


.title {
  place-self: center;
  grid-column: span 4;
  align-self: center;
  text-align: center;
}

.sub-message {
  grid-column: span 2;
}

.content {
  grid-column: span 2;
}

<div class="grid">
  <div class="title">Lorem ipsum dolor sit amet.</div>
  <div class="sub-message">Sub message</div>
  <div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit, molestias, consectetur, laudantium perspiciatis accusantium aut officiis quo sed minima vero iusto quod illum repellendus delectus facilis quidem eius. Porro, assumenda recusandae omnis iste maiores sapiente modi praesentium aut repellendus ipsa nesciunt incidunt architecto? Placeat adipisci veritatis iusto quaerat possimus ullam!</div>
</div>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – Position a title and message in the centre, whilst postioning a sub message at the start

Answers