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