Html 居中分割并使其占据80%的屏幕_Html_Css

Html 居中分割并使其占据80%的屏幕

html css

Html 居中分割并使其占据80%的屏幕,html,css,Html,Css,我想让我的div居中并占据80%的屏幕，在最大窗口大小上它工作正常，但当调整窗口大小时，我的图像div变得非常小 <body style="background-image:url('img/Mesh2.png');background-repeat:no-repeat; background-size: cover; width=:'100%'"> <h1>iSlider</h1> <div id="myImageFlow" clas

我想让我的div居中并占据80%的屏幕，在最大窗口大小上它工作正常，但当调整窗口大小时，我的图像div变得非常小

<body style="background-image:url('img/Mesh2.png');background-repeat:no-repeat; background-size: cover; width=:'100%'">
    <h1>iSlider</h1>

    <div id="myImageFlow" class="imageflow">

        <div id="front">Initialy This is Front  </div>
        <!-- 
        <img src="img/img1.png"  id="id1" longdesc="img/img1.png" width="300" height="360" alt="img1" />
        <img src="img/img2.png"  id="id2" longdesc="img/img2.png" width="300" height="360" alt="img2" />
        <img src="img/img3.png"  id="id3" longdesc="img/img3.png" width="300" height="360" alt="img3" />
        <img src="img/img4.png"  id="id4" longdesc="img/img4.png" width="300" height="360" alt="img4" />
        <img src="img/img5.png"  id="id5" longdesc="img/img5.png" width="300" height="360" alt="img5" />
        <img src="img/img6.png"  id="id6" longdesc="img/img6.png" width="300" height="360" alt="img6" />
        <img src="img/img7.png"  id="id7" longdesc="img/img7.png" width="300" height="360" alt="img7" />
        <img src="img/img8.png"  id="id8" longdesc="img/img8.png" width="300" height="360" alt="img8" />
        <img src="img/img9.png"  id="id9" longdesc="img/img9.png" width="300" height="360" alt="img9" />
        <img src="img/img10.png" id="id10" longdesc="img/img10.png" width="300" height="360" alt="img10" />
        <img src="img/img11.png" id="id11" longdesc="img/img11.png" width="300" height="360" alt="img11" />
        <img src="img/img12.png" id="id12" longdesc="img/img12.png" width="300" height="360" alt="img12" />
        <img src="img/img13.png" id="id13" longdesc="img/img13.png" width="300" height="360" alt="img13" />
        <img src="img/img14.png" id="id14" longdesc="img/img14.png" width="300" height="360" alt="img14" />
        <img src="img/img15.png" id="id15" longdesc="img/img15.png" width="300" height="360" alt="img15" />
        <img src="img/img16.png" id="id16" longdesc="img/img16.png" width="300" height="360" alt="img16" /> 
    </div>


岛国
这是前面
可怕的代码
您不应该使用内联样式，并且不支持longdesc
使用CSS
要使div居中，请执行以下操作：
.class{
width: 80%;
margin: 0 auto;
display: block;
}

如果需要使用自定义属性，请使用data longdesc=“”，而不是（从不）longdesc。
如果80%的div在调整大小时变得太小，那是因为它是一个百分比。
使用最小宽度：300px，每个示例。
提供少量代码。