Question

我有一个模态框（CSS），由于某些原因，我无法在框中获取图像以便水平显示，而不会搞砸盒子？当我将图像漂浮在图库ID中时，他们会离开模态框？ HTML

<head>
    <title>Design and Development</title>
    <link rel="stylesheet" href="main.css">
    <link href='http://fonts.googleapis.com/css?family=Montserrat|Ubuntu+Condensed|Oswald' rel='stylesheet' type='text/css'>
</head>

<body>
    <header>
         <h1>PERSON</h1>

         <h2>Front-End Design + Development</h2>

    </header>
    <ul id="menu">
        <li><a href="#aboutModal">ABOUT</a>
        </li>
        <li><a href="#workModal">WORK</a>
        </li>
        <li><a href="#contactModal">CONTACT</a>
        </li>
    </ul>
    <div id="aboutModal" class="modalDialog">
        <div>   <a href="#close" title="Close" class="close">X</a>

                <h1>ABOUT</h1>

            <img src="images/me.jpg">
            <p><strong>Hello!</strong>
                <br></p>
        </div>
    </div>
    <div id="workModal" class="modalDialog">
        <div>   <a href="#close" title="Close" class="close">X</a>

                <h1>WORK</h1>

            <ul id="gallery">
                <li> <a href="images/yogasite.png">
          <img src="https://lh3.ggpht.com/rIVPZ4wNQ1uWIWoFcnZ-KjjUHfTFskcgwzEoAEqDAb8LjPdtXWM5NLqCLx9BRpEF1Dc=w300">

         </a>

                </li>
                <li> <a href="images/yogasite.png">
          <img src="https://lh3.ggpht.com/rIVPZ4wNQ1uWIWoFcnZ-KjjUHfTFskcgwzEoAEqDAb8LjPdtXWM5NLqCLx9BRpEF1Dc=w300" alt="">

         </a>

                </li>
                <li> <a href="images/yogasite.png">
          <img src="images/yogasite.pnghttps://lh3.ggpht.com/rIVPZ4wNQ1uWIWoFcnZ-KjjUHfTFskcgwzEoAEqDAb8LjPdtXWM5NLqCLx9BRpEF1Dc=w300" alt="">

         </a>

                </li>
            </ul>
        </div>
    </div>
    <div id="contactModal" class="modalDialog">
        <div>   <a href="#close" title="Close" class="close">X</a>

                <h1>CONTACT</h1>


                <br>
                <br>I am currently looking for work.</p>
            <img src="images/06-magnify-icon-32.png">
        </div>
    </div>
</body>

继承人https://jsfiddle.net/cpxd63a1/1/

CSS模式框中的图像

0 个答案: