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

Html – Center multiple inline elements without access to CSS on parent

I need to be able to horizontally align the p elements left, center, or right. There will/could be multiple div elements each with one or more vertical text p elements.

Each time I try , each version has it’s own wrinkle:

  1. If I use float then I can’t center them and if a non vertical p element gets added it ends up next to the vertical text (because it doesn’t have clear: both)

  2. If I use margin and translateX it doesn’t work with multiple elements.

  3. When I tried to get them to add CSS to the parent div (text-align: center) it also changes the alignment on the non vertical p elements.

  4. I can do this using flexbox but that causes issues with the CSS that’s currently on the parent div.

How can this be done without flexbox and without setting CSS on the parent div?

p {
  font-family: Georgia, serif;
  font-size: 18px;
}

.vert-con {
  /* This is sample CSS I can't actually change the CSS for this */
  position: absolute;
  left: 10px;
  top: 10px;
  width: 360px;
  height: 300px;
  overflow: auto;
  background-color: beige;
}

.vert-p {
  writing-mode: vertical-rl;
  display: inline-block;
  vertical-align: top;
  white-space: nowrap;
  margin-inline: 0 18px;
}
<div class="vert-con">
  <p>Text 12 Text 12 Text 12 Text 12 Text 12 Text 12 Text 12 Text 12 Text 12 Text 12 Text 12</p>
  <p class="vert-p">Text 12 Text 12 Text 12 Text 12 Text 12 Text 12 Text 12 Text 12 Text 12 Text 12 Text 12</p>
  <p class="vert-p" style="color: red;">Text 12 Text 12 Text 12 Text 12 Text 12 Text 12</p>
  <p class="vert-p" style="color: blue;">Text 12 Text 12 Text 12 Text 12 Text 12 Text 12 Text 12 Text 12 Text 12 Text 12 Text 12</p>
  <p class="vert-p" style="color: green;">Text 12 Text 12 Text 12 Text 12 Text 12 Text 12 Text 12 Text 12 Text 12</p>
  <p>Text 12 Text 12 Text 12 Text 12 Text 12 Text 12 Text 12 Text 12</p>
</div>
Tags:

2

Answers


  1. 0

    Is this the effect you are after?

    .d1, .d1>div {
  display: flex;
  gap: 1em;
}
.d1 {
  justify-content: space-between;
}
p {
  margin: 0;
  font-family: Georgia, serif;
  font-size: 18px;
  writing-mode: vertical-rl;
}
    <div class="d1">
  <div>
    <p>Text 12 Text 12 Text 12 Text 12 Text 12 Text 12</p>
    <p style="color: red;">Text 12 Text 12 Text 12 Text 12 Text 12 Text 12</p>
  </div>
  <div>
    <p style="color: blue;">Text 12 Text 12 Text 12 Text 12 Text 12 Text 12</p>
    <p style="color: green;">Text 12 Text 12 Text 12 Text 12 Text 12 Text 12 </p>
  </div>
  <div>
    <p style="color: orange;">Text 12 Text 12 Text 12 Text 12 Text 12 Text 12</p>
    <p style="color: purple;">Text 12 Text 12 Text 12 Text 12 Text 12 Text 12 </p>
  </div>
</div>
    Login or Signup to reply.
  2. 0

    Taking the idea in point 3, a couple of things can make it less problematic.

    First, apply the text-align: center only if .vert-con has some vertical elements.

    Second, make text-align to left for the non-vertical elements and use float for vertical elements that are to be left or right.

    Make every non-vertical element clear: both.

    p {
  font-family: Georgia, serif;
  font-size: 18px;
}

.vert-con {
  /* This is sample CSS I can't actually change the CSS for this */
  position: absolute;
  left: 10px;
  top: 10px;
  width: 360px;
  height: 300px;
  overflow: auto;
  background-color: beige;
}

.vert-p {
  writing-mode: vertical-rl;
  display: inline-block;
  vertical-align: top;
  white-space: nowrap;
  margin-inline: 0 18px;
}


/* you'll have to change something for vert-con, make sure it changes only if it has vertical elements*/

.vert-con:has(.vert-p) {
  text-align: center;
}

.vert-con:has(.vert-p) p:not(.vert-p) {
  text-align: left;
  clear: both;
}

p.vert-p.left {
  float: left;
}

p.vert-p.right {
  float: right;
}
    <div class="vert-con">
  <p>Text 12 Text 12 Text 12 Text 12 Text 12 Text 12 Text 12 Text 12 Text 12 Text 12 Text 12</p>
  <p class="vert-p left">Text 12 Text 12 Text 12 Text 12 Text 12 Text 12 Text 12 Text 12 Text 12 Text 12 Text 12</p>
  <p class="vert-p center" style="color: red;">Text 12 Text 12 Text 12 Text 12 Text 12 Text 12</p>
  <p class="vert-p center" style="color: blue;">Text 12 Text 12 Text 12 Text 12 Text 12 Text 12 Text 12 Text 12 Text 12 Text 12 Text 12</p>
  <p class="vert-p center right" style="color: green;">Text 12 Text 12 Text 12 Text 12 Text 12 Text 12 Text 12 Text 12 Text 12</p>
  <p>Text 12 Text 12 Text 12 Text 12 Text 12 Text 12 Text 12 Text 12</p>
</div>

    Note: by being specific – changing things only when vert-con has some vertical elements – it may be that ‘they’ allowing the change to vert-con will not mess with other CSS where no vertical elements are present.

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

Back To Top
Search