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

Html – How to vertically center a horizontal line to the first line of a multiline paragraph using CSS?

I have a layout where I need to position a horizontal line next to a multiline paragraph. The line should be vertically centered to the first line of the paragraph, not to the entire paragraph.

I’ve tried using CSS Flexbox to align the items, but it seems to center the line relative to the entire paragraph. How can I adjust the CSS to achieve this alignment?

Here is the HTML and CSS code I have so far:

body {
  font-family: Arial, sans-serif;
  margin: 20px;
}

.container {
  display: flex;
  column-gap: 20px;
  align-items: flex-start;
}

.line {
  flex-shrink: 0;
  width: 50px;
  height: 2px;
  background-color: red;
}

p {
  margin: 0;
  margin-bottom: 20px;
}
<div class="container">
  <div class="line"></div>
  <div class="text-container">
    <p class="text">
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
    </p>
    <p class="text">
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
    </p>
  </div>
</div>
Tags:

2

Answers


  1. 0

    Use half the height of one line .5lh

    body {
  font-family: Arial, sans-serif;
  margin: 20px;
  font-size: 20px;
}

.container {
  display: flex;
  column-gap: 20px;
  align-items: flex-start;
}

.line {
  /* new code */
  margin-top: .5lh;
  translate: 0 -50%;
  /**/
  flex-shrink: 0;
  width: 50px;
  height: 2px;
  background-color: red;
}

p {
  margin: 0;
  margin-bottom: 20px;
}
    <div class="container">
  <div class="line"></div>
  <div class="text-container">
    <p class="text">
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
    </p>
    <p class="text">
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
    </p>
  </div>
</div>

    You can also simplify the code like below:

    body {
  font-family: Arial, sans-serif;
  margin: 20px;
  font-size: 20px;
}

.text-container {
  padding-left: 70px;
  background:
    linear-gradient(red 0 0) no-repeat
    0 calc(.5lh - 1px)/50px 2px;
}

p {
  margin: 0 0 20px;
}
    <div class="text-container">
    <p class="text">
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
    </p>
    <p class="text">
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
    </p>
  </div>
    Login or Signup to reply.
  2. 0

    Super lazy option could be using just pseudo with "dash" (/em-dash/three-em-dash) from the very same font-face. In theory, such dash should be defined with vertical typographical balance in mind, usually positioned at or around the middle of the x-height, and naturally adjustable with ex-based transform if the outcome would end up be visually suboptimal when used as a "leader". Entire solution could be a single element with a single pseudo:

    p {
 display: flex;
 gap: 1ch;
 &::before {
  content: '⸻';
  color: mark;
  transform: translatey(-.1ex); /* Maybe? */
 }
}

html {
 color-scheme: light dark;
 font-size: 20px;
 font-family: system-ui;
}
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    Translating it vertically by +.5ex should put it near baseline, -.5ex should put it near x-height. Most probably will be quite font-dependent, but the general rule that such dash should "look good between regular glyphs" can establish assumption that there should not be super-wild variations of the vertical position relative to baseline between different fonts.

    This solution could even have some minor benefits over background variants in some environments:

    • the "thickness" of this bar should correspond with text strokes in given font-weight,
    • while being a "real" text, sub-pixel aliasing is more likely to improve the rendering,
    • since it is present as a flex item, it handles "own" sizing automatically. This could be also drawback, depending on your needs.

    Also, to put on the second, third etc. line, it is possible to add white-space: pre and prefix the pseudo content with a line break (a).

    Possible drawback is that it is quite important for the font used to support given dash; if the dash would be picked from some fallback font-face, then the metrics will most probably be off.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search