text-align: leftの要素を中央揃えを余計なマークアップなしで実現するアイデア

ひっさびさに投稿するのだけど、基本メモなので最低限のテストしかしてません。

よく段落は左揃えだけど、全体としてはセンターに揃えたい、ということはありますよね?私だけ?

これまではラッパー要素で囲って、inline-block使ってたんですが、ちょっと違う方法思いつきました。

/* これまでこんな感じ */
<style>
.wrapper {
  text-align: center;
}
.wrapper > p {
  display: inline-block;
}
</style>
<div class="wrapper">
  <p>ダミーテキストです。ダミーテキストです。ダミーテキストです。<br>ダミーテキストです。</p>
</div>
/* 思いついたのは */
<style>
.left-centered {
  display: flex;
  text-align: left;
}
.left-centered::before,
.left-centered::after {
  content: '';
  flex-grow: 1;
}
</style>
<p class="left-centered">ダミーテキストです。ダミーテキストです。ダミーテキストです。<br>ダミーテキストです。</p>

HTML側がシンプルになり、要素を追加せずに修正対応もできるかな。

subやsupでline-heightがズレるのを防ぐCSS

備忘録として。
下付き文字のsubタグや上付き文字のsupタグを使用すると、行送りが通常よりも広くなりブサイクになる。
それをfixするためのcss指定。

出典:CSS Advisor

<style type="text/css">
sup,
sub {
	height: 0;
	line-height: 1;
	vertical-align: baseline;
	_vertical-align: bottom;
	position: relative;
	
}

sup {
	bottom: 1ex;
}

sub {
	top: .5ex;
}
</style>