幅が事前にわからない場合、どうすれば中央に配置できますか?

StackOverflow https://stackoverflow.com/questions/963823

  •  12-09-2019
  •  | 
  •  

質問

div内でテキストを含む段落タグを中央に配置しようとしていますが、marginを使用して中央に配置することができないようです。0 auto 段落の固定幅を指定する必要はありません。段落タグに動的テキストが入り、テキストの量に応じて常に異なる幅になるため、固定幅を指定したくありません。

段落の固定幅を指定したりテーブルを使用したりせずに、段落タグを div 内の中央に配置する方法を知っている人はいますか?

役に立ちましたか？

解決

ここではスタイルシートを使用してそれを行う方法です。

スタイルシートます：

div.center-content
{
    text-align: center;
}

div.center-content p
{
    text-align: left;
    margin-left: auto;
    margin-right: auto;
}

HTMLます：

<div class="center-content">
    <p>Lorem ipsum dolor sit amet</p>
</div>

他のヒント

が見つかり、この：するます。

"テキスト整列" プロパティのほかに、

DIVのようなブロック要素内の要素をセンタリングするための

タグのようなCSSを使用 
 margin:auto

タグの下に掲載されているもののようなもの

（これはほとんどの場合にのみクロスブラウザ互換性の溶液である）テーブルを使用する

垂直にセンタリングする場合、その良好

あなたが使用することができます。

 "text-align:center"  

 "vertical-align:middle"

私は最善の方法は、ブロックレベル要素内の要素が含まれているとやっていると思います：

.innerElement {margin:0 auto}

彼らはフロートパラメータを持っていない、両方のブロックレベル要素です考えると、それは偉大な動作するはずです！

ここに素晴らしい回避策があります 幅のない div を中央揃えにする.

テーブルレスで、どのブラウザでも動作します。

この使用して、インラインCSSを試します：

<p style="text-align: center;">Lorem ipsum dolor sit amet</p>

それとも、HTML

を使用して 
<p align="center">Lorem ipsum dolor sit amet</p>
div要素の幅を設定している場合は、

は、あなたが必要とするすべてがある

.myDiv {テキスト整列：センター。 }

またギャリーさんのコメントに耳を傾けます。いかなる状況の下で、インラインCSSを使用します。

場合は、このための

また別の汚い修正あなたが中央にdivの中で他のものを持っています：

あなたは常にできます：

$（ 'youParagraphまたは.otherContent '）ラップ（''）;ます。

あなたが大規模なチーム内で動作し、関心事の分離が問題である場合は、

は明らかにこれを実践していません。

私は、これは助けを願っています。

えー、デフォルトではブロックレベルの要素であるため、自動マージンには幅を設定する必要があります。

利用可能な幅全体に拡張されます。

IE < 8 をサポートしていない場合は、{ display: を設定するだけで済みます。テーブル;マージン：0 自動;}

それ以外の場合、要素がブロックレベルの要素で囲まれている場合は、 p { display: を実行できます。インラインブロック;} p { 表示:列をなして;} html > /**/ body p {表示:インラインブロック;} (最後の 2 つのルールは IE 用であり、正常なブラウザー用の IE 修正のリセットです) その後、{ text-align: を適用します。中心;コンテナ上で。

誰かがすでに述べたように、参照してください http://haslayout.net/css-tuts/horizo​​ntal-centering 詳細については。

乾杯！Zoffix Znet

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top