html - 如何将父 DIV 中的两个 DIVS 居中并确保图像不与左侧 DIV 重叠

Question

<div class="serviceHolder brClear setCenter">
    <div style="float: left;  min-width: 30%; max-width: 40%; z-index: 100;">
        <div style="display: table; background: url('theImages/talentQuote.png') no-repeat center; background-size: 100% 100%; min-height: 160px; min-width: 160px; text-align: center;">
            <div style="color: #FFF; font-weight: bold; vertical-align: middle; display: table-cell; padding: 0 20px; font-family: 'trebuchet MS'"><xsl:value-of select="txtQuote" /></div>
        </div>
    </div>
    <div style="float: left; min-width: 60%; max-width: 50%; padding-top: 70px; text-align: left; z-index: 50;">
        <img src="{imgPicture/img/@src}" alt="{txtName}" />
    </d

四>

在较小的屏幕(iphone 5s)上生成:

在桌面屏幕上:

非常小的屏幕:

我怎样才能确保

• 带有图像的右侧 DIV 的 z-index 低于左侧 DIV 以确保它低于报价。
• 报价正在调整大小，我如何确保图像调整大小和 不会像在较小的屏幕上看到的那样从右侧被切断。
• 将两个内部 DIV 置于父 DIV 的中心。

Answer 1

看起来右侧带有图像的div也是白色背景，删除白色背景并将其另存为png。

要调整 img 的大小，请根据需要为其指定宽度(例如 60%)并仅使用宽度，不要对父 div 使用 min-width 和 max-width，并且 img 的宽度应为 100%，显示: block 。这样 img 将调整大小并且不会被剪切。

同时添加相对于引用 div 的位置....这将有助于索引。

关于两个 div 的中心，您能否使用 jsfiddle 提供您的代码...除了尝试对两个 div display:inline-block 都使用之外，这很容易看到；垂直对齐:顶部；删除 float 并为父 div 添加 margin:0 auto