

[![画面中央に固定したいです。Mac用及びモバイル用](https://i.stack.imgur.com/CRulJ.png)](https://i.stack.imgur.com/CRulJ.png)

* * *

HTML ソースコード

[code]

    <body>
    <br/><br/><br/><br/><br/><br/><br/><br/>
    
    <div id="spdayo">
    <a href="index.html"><img src="sp1.jpg" alt="ginzagakubuchi" width="589" height="585">
    </a>
    <div id="coolsright">
    <a href="index.html"><img src="givemecoolsright.jpg" alt="Denencho-fu,田園調布2014" width="450" height="460">
    </a></div>
    </div>
    
    <br/>
    <div id="box">
    <img src="template1.jpg" width="150" height="50">
    <!--#boxtextを入力-->
    <div id="boxtext">
    <p>Welcome to Tokyo Hill </p>
    </div>
    </div>
    
    <br/><br/><br/><br/><br/><br/><br/><br/>
    
    <!-- To Be Continued ...
    <br><br><br><br><br><br><br>
    <center>Copyrights(C) STANDAY 2017 </center>
    -->
    
    </body>
    
[/code]

ーーーー  
CSS

[code]

    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;
     }
    }
    
[/code]

* * *

また、テキストプレートに影や、ボーダーラインを追記してエフェクトをあげたいです！  
どのようにして書いたらベストかご教授ください！  
よろしくお願いいたします。


CC BY-SA 3.0
2017-03-14T04:46:42.720
33303
2017-03-14T06:42:11.800
21007
question
html css
画像を画面中央に持っていきたい。テキストテンプレートに文字を記入したい。

[code]

    #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%);
    }
    
[/code]

で解決できました、ありがとうございました！


CC BY-SA 3.0
2017-03-14T06:42:11.800
33307
2017-03-14T06:42:11.800
21007
33303
answer