メニューバーの中心にテキストを配置する

-3

テキストをアイコンの中央に揃える必要があります。

コード：

<table id="cssTable"> 
    <thead> 
     <tr> 
      <th> 
       <i style=" text-align: center;vertical-align: middle;" class="icon s20 {{node.icon}}" ng-if="node.icon"></i> 
      </th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td> 
        <span style=" text-align: center;vertical-align: middle;" class="title" translate="{{node.translate}}" flex>{{node.title}}</span> 
      </td> 
     </tr> 
    </tbody> 
</table>

しかし、それは働いていません。 CSSを使用してテキストの中央をスタイルするにはどうすればよいですか？

出典

2017-07-10 Alana

離れインラインルールからあなたのマークアップ内で）。あなたは[mcve]を提供しますか？つまり、関連するCSSを追加し、[Stack Snippet]（https://stackoverflow.blog/2014/09/16/introducing-runnable-javascript-css-and-html-code-snippets/）にします。 – domsson

あなたのCSSを見ないと確信が持てませんが、 'text-align：center'はうまくいくはずです。また、インラインjs/cssを使用しないでください。コードを維持するのが難しく、外部のCSSファイルに移動するのは悪い習慣です – ThisGuyHasTwoThumbs

手元のテキスト整列の問題以外にも、なぜ 'テーブル'あなたのメニューのために？また、ページの 'head'に外部スタイルシートやスタイルの代わりにインラインスタイルを使用する理由もあります。 – domsson

-1

あなたはスパンプロパティにtext-alignを追加している、とあなたはスパンに追加しようとする理由を私は理解することができますので、それはだthとtd

<th style="text-align: center;"></th> 
<td style="text-align: center;"></td>

出典

2017-07-10 09:33:01

申し訳ありませんが、それはタイプミスでした –

心配しないで、私はコメントしました。私はまだインラインスタイルの使用を控えています。結局のところ、私たちは質の高い回答を提供するためにここに来ており、より良い回避法を教えることはありません。 – domsson

注目の@domdom –

にtext-align:centerを追加する必要があります。しかし、text-alignは、基本的に子要素を揃えるために、親要素で最もよく使用されます。

あなたはこのような何かをするだろう（ないあなたのコード、どのように使用できるのほんの一例のように何かをすることを意味）：

HTML：

<div id="myDiv"> 
    <img src="img1.png" class="img" /> 
    <p>My Text</p> 
</div>

CSS：

#myDiv {text-align: center;}

idがmyDivのdivがロードされると、div内のすべての子要素を中央揃えにすることはありません。

あなたの場合、調整するテキストを保持するテーブル<td>/<th>にテーブルを追加する必要があります。例えば。フレキシボックスアイコンの絶対配置を使用する代替として、

td, th {text-align: center}

出典

2017-07-10 09:44:31 ThisGuyHasTwoThumbs

。

ul { 
 
    list-style: none; 
 
    width: 5em; 
 
    margin: 0; 
 
    padding: 0; 
 
    display: flex; 
 
} 
 

 
li { 
 
    position: relative; 
 
    text-align: center; 
 
    padding-top: 1.5em; 
 
    min-width: 5em; 
 
    background-color: blue; 
 
    color: white; 
 
    cursor: pointer; 
 
} 
 

 
li:not(:first-child) { 
 
    margin-left: .1em; 
 
} 
 

 
li:hover { 
 
    background-color: lightblue; 
 
} 
 

 
li:before { 
 
    font-family: FontAwesome; 
 
    position: absolute; 
 
    width: 1em; 
 
    top: 0.3em; 
 
    left: calc(50% - .5em); 
 
} 
 

 
.customers:before { 
 
    content: "\f0c0"; 
 
} 
 

 
.user:before { 
 
    content: "\f2c0"; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> 
 
<ul> 
 
    <li class="customers">Customers</li> 
 
    <li class="user">User</li> 
 
</ul>

出典

2017-07-10 10:00:20 Gerard

spanからtext-align: centerを削除し、代わりに親要素、thとtdに追加し、手で問題を解決するには。

しかし、あなたのコードには、私が指摘したい他のいくつかの問題があります。

なぜtableですか？

メニューにはtableが使用されています。あなたが非常に具体的な理由を持っていなければ、そうしてはいけません。その理由は、HTMLはすべてセマンティクスに関するものであり、メニューをテーブルにする意味はあまりありません。単に表形式のデータではないからです。一般的な方法は、順序付けられていないリスト（ul）を使用することです。

なぜインラインスタイルですか？あなたの<head>

インラインスタイル内<link>

<style></style>セクションを使用して

外部スタイルシート（それはあなたが使用しているものだ）

：

は、CSSを適用するには、3つの方法がありますこれで、インラインスタイルは外部スタイルシートのルールまたはstyle要素のルールよりも優先されます。彼らはまた、コンテンツとプレゼンテーションを分離する考え方にも違反します。したがって、それらを使用する特定の理由がない限り、それらは悪い習慣とみなされます。私はこのため、以下の提案を一緒

それをすべてを置く

：私たちはあなたの現在のCSSが（どのようなものか知らない

* { margin: 0; padding: 0; box-sizing: border-box; } ul { list-style: none; width: 108px; } li { color: #fff; text-align: center; background-color: #2d323e; background-repeat: no-repeat; background-position: center 20%; } li.customers, li.user { background-image: url(http://via.placeholder.com/20x20); } li a { display: block; width: 100%; height: 94px; padding-top: 60%; color: inherit; text-decoration: none; font-family: sans-serif; font-size: 9pt; font-weight: bold; }

<ul> <li class="customers"><a href="#1">Customers</a></li> <li class="user"><a href="#2">User</a></li> </ul>

出典

2017-07-10 10:09:46 domsson

素敵な完全な答え:) – ThisGuyHasTwoThumbs

メニューバーの中心にテキストを配置する

答えて

関連する問題