Question

下面是我的代码

    <div class="center" style="text-align:center;">     
    <div style="position:relative;width:26%;min-width:300px;float:left;background-color:red;border:1px solid black;"">  
    <img width=500px;height=500px; src="<?php echo $this->basePath().'/images/feat/shop/5/5_large.jpg';?>">
    </div>
    <div style="position:relative;float:left;min-width:100px;width:10%;height:500px;background-color:green;border:1px solid black;"">   
    </div>
    <div style="position:relative;width:26%;float:left;min-width:300px;background-color:blue;border:1px solid black;">  
    <img width=500px;height=500px; src="<?php echo $this->basePath().'/images/feat/shop/5/5_large.jpg';?>">
    </div>
    </div>

上面的等级为center的div位于left侧，但我想将其准确定位在屏幕的中心，而不使用Margin，padding，{{1 }} left属性，你可以看到我已经尝试过使用'text-align'但是没有用，是否可能？

Answer 1

尝试这样做：

<div class="center" style="position: absolute; top: 50%; left: 50%;">     
...

或者为了更准确，请尝试使用calc()功能：

<div class="center" style="position: absolute; top: calc(100%/2 - divHeight/2); left: calc(100%/2 - divWidth/2);">     
....

根据您的说法，您没有使用margin，因为当您将窗口大小减小到最小时，div不会向左移动。好的，这是我的回答，使用margin和pixels做你所记录的事情，但使用margin percentage(%)将帮助你实现你想要的目标。

使用百分比 使用百分比并不难，但单位与像素不同。如果你想让你的div在中心。

尝试这样做：

margin: 0 auto;

或者这个：

margin: 0 calc(50% - divWidth/2);

这肯定会帮助你实现你想要的目标。

希望它有所帮助。

Div位于中心位置

1 个答案: