Question

我有一个父div，里面有两个div，一个是image，一个是描述，如下面的快照

父div具有属性text-align: center。所以它的工作正常，文字图像和描述都在中心。

描述div具有属性max-width: 580px。因此，如果描述文本增加，图像将略微向左移动，如下面的快照

它看起来不错。但是当有一些长字不适合当前行时，它会使用整个580px width而长字会进入下一行，如下所示

因为使用了整个描述宽度，因此图像通过使用父属性text-align: center向左移动。

但它看起来并不好，因为它在css逻辑的中心，而不是外观。

有没有办法只在有一些内容时才占据整个宽度。

我使用了属性display: table-caption，现在只需要文本宽度

并且它位于父div的中心。

然后它将Assistant Manager分成两行，如下所示，我不想

有没有办法通过某些css属性实现上述任务，或者我必须使用javascript来实现上述任务。

Answer 1

由于您没有向我们提供任何代码，我只能猜测。

这就是我想出的：https://jsfiddle.net/9888d4tf/1/

<强> HTML

<div class="headline-wrapper">
    <img class="headline-image" src="http://kcdn.at/company/84085/1073352/logo-fairmoney-clever-consulting-gmbh.companybig.gif">
    <p class="headline-title">
        <span>
            Assistant&nbsp;Manager someveryverylonglongtexttext
        </span>
    </p>
</div>

<br/><br/>

<div class="headline-wrapper">
    <img class="headline-image" src="http://kcdn.at/company/84085/1073352/logo-fairmoney-clever-consulting-gmbh.companybig.gif">
    <p class="headline-title">
        <span>
            Assistant&nbsp;Manager
        </span>
    </p>
</div>

<强> CSS

.headline-wrapper {
    background: #fff;
    text-align: center;

    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
}

.headline-wrapper > .headline-image {
    width: 298px;
    height: 92px;
    align-self: center;
}
.headline-wrapper > .headline-title {
    font: 30px/1.1 Verdana;
    display: inline-block;
    text-align: left;
}
.headline-wrapper > .headline-title > span {
    display: table-caption;
}

<强>结果

关键是，你以前需要知道哪些词你不想包装。然后，您可以将它们包裹在white-space:nowrap范围内，或者像我一样用 替换它们之间的空格。

Answer 2

您可以使用百分比（例如width: 50%）设置描述div的相对宽度。我认为根据你的图像看起来会很好。

如何在css中使用块的宽度相对于内部内容

2 个答案: