HTML

【HTML】CSSで画像を横中央寄せ

  /

画面の横中央に画像を表示しようとして、地味に少しはまった。

 

色々試したが、最終的にうまくいったのは「text-align: center;」

 

HTMLは以下のような感じ。

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>画像横中央表示</title>
    <link type="text/css" rel="stylesheet" href="../css/style.css" />
</head>

<body>
    <div id="container">
        <div id="image">
            <img src='img_001.jpg' />
        </div>
    </div>
</body>

 

div id=”image”の画像を横中央表示する。

CSSは以下。

#image {
    text-align: center;
}
CSS text-align
RELATED POST