-1
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/style.css">
    <title>Document</title>
</head>
<body>
    <!-- <img id="button" src="../art/button/menu.png" onclick="viewMenu()"> -->
    <div class="images">
            <img id="clock" src="../art/namArt/clock/clock.png">
            <img id="time" src="../art/namArt/clock/time.png">
            <img id="minus" src="../art/namArt/clock/minus.png">
            <img id="second" src="../art/namArt/clock/second.png">
    </div>
</body>
</html>

body{
    background-color: greenyellow;
}
#clock, #minus, #second, #time{
     position: absolute; 
    /* display: block;
    margin-left: auto;
    margin-right: auto; */
}
#clock{
    /* background-image: url(../art/namArt/clock/time.png); */
    height: 350px;
}
.images{
    /* size: 300px;
    width: 100%; */
    /* background-image: url("../art/namArt/clock/clock.png") ;
    background-repeat: no-repeat;
    background-size: contain; */
    /* display: block;
    margin-left: auto;
    margin-right: auto;
     */
    text-align: center;
}

enter image description here

i want to create clock use with art. But when i override and align center image by use position: absolute and text-align: center but it just center left of image, not center of image. (thanks for reading and i'm so sorry for my bad english)

ti7
  • 16,375
  • 6
  • 40
  • 68
Nguyễn Anh Việt
  • 1

1 Answers1

0

May be you should try:

#clock, #minus, #second, #time{
position:absolute;
left: 0;
right: 0;
margin: auto;
text-align: center;
}
Vicky Maharjan
  • 318
  • 1
  • 7