html - 我正在尝试使用 HTML 和 CSS 制作 Microsoft Sharepoint 页面。图像不会在不同的浏览器中居中

Question

我正在尝试将此图像放在左侧容器中，但它似乎在 chrome 中而不是在资源管理器中泄漏。

  .left-col p{
                           text-align: justify;
                           width:300px;
                                       }                           

                  .left-col img{
                              margin: 0 auto;
                              left: 10%;
                              width:300px; 
                              height: 130px;
                              text-align:center;
                               }

<div class="left-col">
    		<img src="Cyber.jpg" width="200" height=150"/>
             <p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis neque nec luctus maximus. Donec eu eleifend libero, nec scelerisque metus. Morbi volutpat turpis pretium </p>

.container div {
			padding: 1%;
			box-sizing: border-box;
			min-height: 700px;
		}
                  .left-col p{
                           text-align: justify;
                           width:300px;
                                       }                           

                  .left-col img{
                              margin: 0 auto;
                              left: 10%;
                              width:300px; 
                              height: 130px;
                              text-align:center;
                               }

		.left-col, .right-col {
			background-color: #f4f4f4;
			width: 25%;
			float: left;
		}
		.center-col {
			width: 50%;
			float: left;
		}

</div>
<div class="container">
	<div class="left-col">
    		<img src="Cyber.jpg" width="200" height=150"/>
             <p><p>Lorem  pretium </p>
	</div>
	<div class="center-col">
		<h2>Center</h2>
		<p>Lorem ipsum dolortempor.</p>
	</div>
	<div class="right-col">
		<h2>Right</h2>
		<p>Lorem tempor.</p>
	</div>
</div>

标签： htmlcsssharepoint

Answer 1

以下示例代码供您参考。

<style>
.container{ 
    width:100%;
    position: relative;
}
.container div{
    min-height: 700px;
    height:100%;
    padding: 1%;
    box-sizing: border-box;
}
.left-col p{
    text-align: justify;
    width:270px;
}                           

.left-col img{
    margin: 0 auto;
    left: 10%;
    width:270px; 
    height: 130px;
    text-align:center;
}
.center-col {
    width: auto;
    margin: 0 300px;
    float:left;
}
.left-col{
    background-color: #f4f4f4;
    position: absolute;
    left: 0;
    top: 0;
    width: 300px;
}
.right-col {
    background-color: #f4f4f4;
    width: 200px;
    position: absolute;
    top: 0;
    right: 0;
}

</style>
<div class="container">
    <div class="left-col">
        <img src="Cyber.jpg" />
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis neque nec luctus maximus. Donec eu eleifend libero, nec scelerisque metus. Morbi volutpat turpis pretium </p>
    </div>
    <div class="center-col">
        <h2>Center</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis neque nec luctus maximus. Donec eu eleifend libero, nec scelerisque metus. Morbi volutpat turpis pretium</p>
    </div>
    <div class="right-col">
        <h2>Right</h2>
        <p>Lorem tempor.</p>
    </div>
</div>