I want to bring the image to the center of the screen.I want to fill in the text template.

for Mac and Mobile

HTML Source Code

<body>
<br/><br/><br/><br/><br/>>br/>br/>>

<divid="spdayo">
<a href="index.html">img src="sp1.jpg" alt="ginzagakubuchi" width="589" height="585">
</a>
<divid="coolsright">
<a href="index.html">img src="givemecoolsright.jpg" alt="Dencho-fu, Denenchofu 2014" width="450" height="460">
</a></div>
</div>

<br of >
<divid="box">
<img src="template1.jpg" width="150" height="50">
<!--Enter #boxtext-->
<divid="boxtext">
<p>Welcome to Tokyo Hill</p>
</div>
</div>

<br/><br/><br/><br/><br/>>br/>br/>>

<!--To Be Continued...
<br>br>br>br>br>br>br>br>br>br>br>
<center>Copyrights(C)STANDAY 2017</center>
-->

</body>

-
CSS

body{
  font-size: 28 px;
  font-family —Times New Roman, sans-serif;
  color:#333;
}

#spdayo{
  margin:0 auto;
  margin-left —auto;
  margin-right —auto;
  position:relative;
}

#coolsright{
  position:absolute;
  top —63px;
  left —68px;

}

#box{
  margin-left —auto;
  margin-right —auto;
  position:relative;
  margin-top: 290px;
}

#boxtext{
  position:absolute;
  top —100px;
  left —100px;
}


@media only screen and (max-device-width:480px)
{
  #coolsright{
    position:absolute;
    top —270px;
    left:260px;
 }

 #spdayo{
   text-align:center;
   position:relative;
 }
}

Also, I would like to add shadows and borderlines to the text plate to give it an effect!
Please tell me how it's best to write it!
Thank you for your cooperation.

html css

2022-09-30 21:22

1 Answers

#spdayo{
position:absolute;
top —25%;
left: 50%;
-webkit-transform:translate (-50%, -50%);
-moz-transform:translate (-50%, -50%);
-ms-transform:translate (-50%, -50%);
-o-transform:translate (-50%, -50%);
transform —translate (-50%, -50%);
}

It was solved by , thank you very much!

2022-09-30 21:22

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656