なんか思うように揃わなかったり、機能しなかったりします。なんでやねん、よし一度いろいろ実験したろと思っており、やってみました。知っている方、詳しく方には目新しい情報は皆無です。高さ(height)が設定されている時は、そちらが優先される。和文での中央揃いが難しい(middleで真ん中に揃わない)まとめいろいろやった結果をまとめてみます。まとめるのって難しい...。インラインの要素にしか使えません。インラインの場合、テキストの縦方向を揃えるプロパティなので何となく親要素のブロックレベルに指定すると感覚的に思ってしまうのですが、間違いです(わたしだけか?)。使える値に違いがあります。これもリファレンスなどで詳しく書かれていますね。ややこしいと言うほどでも無いのですが、わたしは頭が悪いからよく分からなくなります。理解するためにも、この2つの違いを少しまとめます。baseline(初期値)となります。値だけ使えるこの2つだけなので、ややこしいという訳ではありません。ま、display:table-cellとvertical-align:middleを使って、ボックスの中身を中央表示する方法は有名ですので、ご存知の方も多いと思います。*1このことに関しては、こちらの記事が非常に分かりやすくて参考になります。わたしも参考になりました。」と「パーセント(%)」。大きさの割合分移動します。0の場合、いくらパーセントを指定しても動きません。ここらへんのことは先ほどのリファレンスと、以下の記事が非常に参考になります。揃えているものtable-cell要素に設定した場合は非常に分かりやすい動きをしてくれるのですが、ややこしいのはインラインの方です。次はインラインでは何を揃えているのかということに焦点を合わせてみます。大きさを基準として揃えるこちらで揃える基準となる基本的には文字と行間です。フォント自体や文字サイズ(font-size)と行間(line-height)の高さが揃える位置に影響を与えています。ついては、こちらの記事が参考になります。フォントに関係していますので、フォントに依存しています。要素を下揃にしたりなどできます。使わずに四角いボックスが下端に揃っているように見せたものです。使ってそれっぽく見せています。「bottom」と同じ位置に表示されます。top、bottomは機能しません。機能しても位置が変わりません。動きかたを何となくつかめた感じがします。高さ(height)が設定されている時は、そちらが優先される。あるのですが、これが入ってくると、ちょっとややこしくなるのです。高さを揃える要素にするのですが。プロパティが指定してあると、こちらの方で位置が揃います。百聞は一見にしかずです。次のサンプルを見てください。vertical-align:bottomが設定されています。テキストではなくインラインボックスが下に揃っています。)を持っていると、そちらの数値のほうが優先されるようです。あればそちらの高さを優先します。インラインに設定したときのことをまとめますと、次のような感じです。高さが指定されている時は、揃える基準が変わるので気をつけたほうがいいようです。和文での中央揃いが難しい(middleで真ん中に揃わない)もうひとつ困ったことが、和文での中央揃えです。使う場面としては、挿入した画像やアイコンを真ん中に揃える時に使うこともあると思います。middle(中間という意味)を指定すれば、英文ならばちょど良い位置に揃えてくれます。和文では話が変わります。ズレているように見えるのです。サンプルとして、まず中心が分かりやすいアイコンのようなものをCSSで作りました。CodePen.それを次のようにテキストの前に配置します。middle;}これらを表示させたものが、こちらの画像です。背景色は四色に別れています。2なので、ちょうど行とフォントと行間の余白、それとフォントの真ん中のラインを見分けやすくしています。これを見ての通り、中心から少しズレています。"」が基準点になっているため、この中心を「中間」としても文章全体に違和感は生じません。平仮名や漢字といった和文の場合、だいたいは正方形の枠に収まるように書きます。字の中心が違うのです。言えば、フォントのデザインによってもこれらは変わってきます。)>もうこうなってきたら、どの和文フォントでも共通する正確な中間ラインの取り方なんて不可能だと思います。指定するのが1番良いように感じます。先ほどの三種類のフォントで設定してみたところ、次のような感じです。場合フォントの大きさが変わってもアイコンの位置のズレがあまりありません。まとめいろいろやってみた結果は以上です。どんなものかというのが、何となく分かったような気がします(逆にこんがらがった可能性もありますが...笑)。位置の違い、とくに真ん中配置とかは非常に細かいことなんですけど、迷う時には迷ってしまうんですよね、わたしのように。そんな方に対して、この記事が何かの参考になれば、とても嬉しいです。揃える」とも言えます。width属性とheight属性とがあります。これらは通常...2017-08-06リストのマーカーをCSSでカスタマイズする方法まとめHTMLでリストを作ると、自動でマーカーが付きます。非常に便利...2017-06-30ヘッダ固定時のページ内リンクのズレをCSSだけで解消する3つのテクニックブログやサイトで固定ヘッダーを設置すると、気になるモノとし...2017-06-24はてなブログのスマホ版アイコン画像をフォトライフやインラインイメージを使って変える方法スマホ版を作るにあたり、アイコンにもこだわりました。はてなブログPro冬眠しないタヌキ。プロフィールはこちら。わたしと納豆ごはんスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。