Question

所以我有一行带有前导图标的文字。我需要将文本多行对齐，同时图标保持垂直居中，与文本相关。

<div>
    <span class="icon"></span>
    <span>My block of long text that will go multiline when the window is resized</span>
</div>

让我尝试用一些ASCII解释。我在行上放了一个边框来帮助想象它。 'O'是图标。

+--------------------------------+
|     My block of long text that |
|  O  will go multiline when the |
|     window is resized          |
+--------------------------------+

+-----------------------------------------------------------------------------+
|  O  My block of long text that will go multiline when the window is resized |
+-----------------------------------------------------------------------------+

不幸的是，我的公司（暂时）使用自制的网页框架限制了我对javascript的使用。这里的目标是使用直接CSS，我有完全访问权限。我已经搞乱了浮动，清除，内联，内联块，块，边缘等等。我的前端fu很弱，所以我需要你们中的一些忍者的帮助。

这里的要点是，当桌面上的窗口很宽并且移动时窗口很窄时，这样看起来很漂亮。

TIA！

Answer 1

这可能是一个解决方案：

.icon {
  width: 25px;
}

.otherspan {
  width: calc(100% - 25px);
}

这样，您的图标将始终占据固定宽度，文本范围将随着视口缩小而缩小。

Answer 2

这是我怎么做的......

<强> HTML

<div><span class="icon"></span><p>My block of long text that will go multiline when the window is resizedMy block of long text that will go multiline when the window is resizedMy block of long text that will go multiline when the window is resizedMy block of long text that will go multiline when the window is resized</p></div>

<强> CSS

* {
    box-sizing: border-box;}

div {
    display: block;
    background: #ddd;
    padding: 25px;}

.icon {
    display: inline-block;
    background: black;
    vertical-align:middle;
    height: 20px;
    width: 20px;}

p {
    display: inline-block;
    vertical-align: middle;
    width: calc(100% - 20px);
    padding-left: 25px;}

Answer 3

如果我理解正确的话，这就是你想要做的事情？ <div class="image"></div>是你的形象的地方

＆＃13;

.image {
    height:150px;
    width:150px;
    background-color:grey;
}

＆＃13;

<table>
    <tbody>
        <tr>
            <td>
                <div class="image"></div>
            </td>
            <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur porttitor rhoncus porta. Phasellus porttitor magna sed diam ullamcorper tincidunt. Maecenas tempor molestie iaculis. Fusce ultricies elit et commodo faucibus. Quisque vel velit id urna tincidunt pharetra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc in est nec magna pulvinar pellentesque. Donec ac dui lacinia, blandit nulla vel, eleifend mi. Integer non tellus at massa ornare feugiat id a enim. Suspendisse vel placerat orci. Morbi vitae nulla sed augue tristique sollicitudin sed ut lacus. Mauris vulputate placerat tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus ultrices in nulla blandit molestie. Praesent vel nisl rutrum, maximus mauris egestas, consequat enim. Nulla eget dapibus arcu.</td>
        </tr>
    </tbody>
</table>

＆＃13;

Answer 4

一种解决方案是将图标相对于div垂直对齐定位。

div {
    background: #EEE;
    position: relative;
    padding-left: 28px;
    min-height: 26px;
    line-height: 26px;
    margin-bottom: 10px;
}
.icon {
    display: inline-block;
    width: 24px;
    height: 24px;
    background: url(https://cdn1.iconfinder.com/data/icons/hawcons/32/698572-icon-6-mail-envelope-closed-24.png) no-repeat 0 0;
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -12px;
}

<div>
    <span class="icon"></span>
    <span>My block of long text that will go multiline when the window is resized</span>
</div>

<div style="width: 250px;">
    <span class="icon"></span>
    <span>My block of long text that will go multiline when the window is resized</span>
</div>

<div style="width: 200px;">
    <span class="icon"></span>
    <span>My block of long text that will go multiline when the window is resized</span>
</div>

在内联节点左对齐

4 个答案: