Question 191203 in Html Question posted in
Some basic documentation can be found here.

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

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:

enter image description here

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:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search