index.html

<!DOCTYPE html>
<html>

<head>
    <title>이미지 버튼</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/styles.css">
    <link href="https://fonts.googleapis.com/earlyaccess/notosanskr.css" rel="stylesheet">
</head>

<body>
    <h1>Check me out on...</h1>
    <div class="image">
        <a href="https://facebook.com"><img src="images/facebook.png" /></a>
        <a href="https://instagram.com"><img src="images/instagram.png" /></a>
        <a href="https://github.com"><img src="images/github.png" /></a>
    </div>
</body>

</html>

css/styles.css

body {
    margin: 50px 0;
}

h1 {
    font-family: 'Noto Sans KR', sans-serif;
    margin: 0;
    margin-bottom: 20px;
    text-align: center;
}

img {
    width: 70px;
    margin-right: 20px;
}

.image {
    text-align: center;
}

일단 이미지를 포함한 div 특성에 text-align: center; 를 넣어서 가운데 정렬은 시켰는데요.

강의에서는 그것보다 div를 block으로 설정하고 margin-left와 right을 auto로 설정하는 것을 권장한다고 하셔서 그렇게 시도해봤는데 속성이 안먹히더라구요.

혹시 왜 안 먹히는지 알 수 있을까요?

그 때는 지금 저장된 코드에서,

.image {

display: block;

margin-left: auto;

margin-right: auto;

}

로 했었습니다.