0

1 行に 3 つの画像を取得しようとしています。1 つは左揃え、1 つは中央揃え、最後の 1 つは右揃えです。私はそれを行うために単一行のテーブルを使用することにしましたが、画像をそれぞれのセル内で中央に配置するのに苦労しています。

私が選択したよりも良い方法はありますか？この<td align="center">属性は HTML5 で非推奨になったため使用しないので、CSS を使用して使用する方法を探しています。これは私が現時点で持っているものです（セル内の画像の配置がどのようにレンダリングされるかを確認できるように、テーブルの境界線属性を「1」に設定しました）：

<style>
  .centre_image
  {
  float:center;
  }
</style>

<body>
<table border="1">
    <tr>
    <td class="centre_image">
        <object type="image/svg+xml" data="images/lawfirms.svg">   
          <img src="images/lawfirms.png" alt=""/>     
        </object>
    </td>
    <td class="centre_image">
        <object type="image/svg+xml" data="images/industry.svg">     
          <img src="images/industry.png" alt=""/>     
        </object>
    </td>
    <td class="centre_image">
        <object type="image/svg+xml" data="images/in-house.svg">     
          <img src="images/in-house.png" alt=""/>     
        </object>
    </td>
    </tr>
</table>

これにより、Ubuntu の Firefox 19.0 で次の結果が得られます。 ここに画像の説明を入力

次の結果は Chrome 25.0 になります。 ここに画像の説明を入力

編集 - j08691 の回答で参照されている変更を行った後の完全な HTML は次のとおりです。

<!DOCTYPE html>     
<html xmlns="http://www.w3.org/1999/xhtml">     
<head>
<meta charset="UTF-8"/>     
<title>SVG Included with <object> tag</title>

<style>
.centre_image
{
text-align:center;
}
</style>
</head>

<body>
<table border="1" style="width:100%">
    <tr>
    <td class="centre_image">
        <object type="image/svg+xml" data="images/lawfirms.svg">   
          <img src="images/lawfirms.png" alt=""/>     
        </object>
    </td>
    <td class="centre_image">
        <object type="image/svg+xml" data="images/industry.svg">     
          <img src="images/industry.png" alt=""/>     
        </object>
    </td>
    <td class="centre_image">
        <object type="image/svg+xml" data="images/in-house.svg">     
          <img src="images/in-house.png" alt=""/>     
        </object>
    </td>
    </tr>
</table>

 </body>
</html>

Naresh Kumar の回答の結果は次のとおりです。 ここに画像の説明を入力

4

4 に答える 4

3

float:centerプロパティがないので試してみましたtext-align:centerか？

.centre_image {
    text-align:center;
}

jsFiddle の例

于 2013-03-14T16:33:25.847 に答える
0

次のようなものを試してください：

.centre_image{
    text-align:center;
    margin-left:auto;
    margin-right:auto;
}

これがお役に立てば幸いです。

于 2013-03-14T16:34:45.657 に答える
0

それを正しくしない方法はたくさんありました。特に「float:center」。

ここで例をいじり、ここで基本的な.cssリセットを使って別のフィドルをいじりました

TDタグで水平方向に中央揃えにしたいので、単純に揃えることができます..

<td align="center">

しかし、'align' プロパティは '非推奨' であり、代わりに CSS を使用するよう提案されることに気付くでしょう。これについては、他の人がすでに答えを示しています

.centre_image {
    text-align:center;
    vertical-align:middle;
}

この CSS は、要素が「フローティング」されていない限り機能します

ps 'DEPRECATED' は悪ではありません。

ps w3school はStackOverflow であまり評判がよくありません。

于 2013-03-14T17:03:31.667 に答える
0

HTML5 では、vAlign は非推奨です。ここでは、3 つの画像すべてを side li タグに入れるヒントを示します。そして、CSS でプロパティ display: inline ブロックを li タグに割り当てます。

于 2013-03-14T16:37:15.847 に答える