CSS 垂直对齐和打断文本答案

【问题标题】：CSS vertically align and break textCSS 垂直对齐和打断文本
【发布时间】：2019-03-08 18:44:51
【问题描述】：

我被困在无法垂直对齐文本并在每个圆圈中间将两个单词分开的位置。

例如，单词“Classic Collection”需要像下面那样分解，垂直对齐并在圆圈中居中。

 Classic 
Collection

想知道是否有人可以帮助我完成这项工作。

body {
    background-color: #f7f7f7;
}
#coll_container .coll_item {
    display: inline-block;
    color: #333;
    list-style: none;
    border-radius: 50%;
    transition: 0.3s;
    width: 105px;
    height: 105px;
    text-align: center;
    border: solid 3px #333;
}
#coll_container .coll_item a:hover {
    margin: 0;
    padding: 0;
    color: #fff;
}
#coll_container .coll_item a span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: normal;
    display: block;
    font-weight: 600;
    border-radius: 50%;
    width: 95px;
    height: 95px;
    padding:2px;
    border: solid 3px #fff;
}
#coll_container .coll_item:hover {
    background-color: #333;
    color:#fff;
}
#coll_container .active {
    background-color: #333;
    border-radius: 50%;
}
#coll_container .active a span {
    color:#fff;
    border: solid 3px #333;
}

<div id="coll_container">
      <ul class="coll_list">
        <li class="coll_item">
          <a title="title" class="collections"><span>Classic Collection</span></a>
        </li>
        <li class="coll_item active">
          <a title="title" class="collections"><span>Ultimate Collection</span></a>
        </li>
        <li class="coll_item">
          <a title="title" class="collections"><span>Luxurious Collection</span></a>
        </li>
      </ul>
</div>

http://jsfiddle.net/r9Lte1mu/5/

【问题讨论】：

标签： css vertical-alignment centering styling

【解决方案1】：

删除无包装代码

text-overflow: ellipsis;
white-space: nowrap;

从 span 中使用 flexbox

body {
  background-color: #f7f7f7;
}

#coll_container .coll_item {
  display: inline-block;
  color: #333;
  list-style: none;
  border-radius: 50%;
  transition: 0.3s;
  width: 105px;
  height: 105px;
  text-align: center;
  border: solid 3px #333;
}

#coll_container .coll_item a:hover {
  margin: 0;
  padding: 0;
  color: #fff;
}

#coll_container .coll_item a span {
  overflow: hidden;
  /*
    text-overflow: ellipsis;
    white-space: nowrap;
    */
  word-wrap: normal;
  display: block;
  font-weight: 600;
  border-radius: 50%;
  width: 95px;
  height: 95px;
  padding: 2px;
  border: solid 3px #fff;
  display: flex;
  align-items: center;
}

#coll_container .coll_item:hover {
  background-color: #333;
  color: #fff;
}

#coll_container .active {
  background-color: #333;
  border-radius: 50%;
}

#coll_container .active a span {
  color: #fff;
  border: solid 3px #333;
}

<div id="coll_container">
  <ul class="coll_list">
    <li class="coll_item">
      <a title="title" class="collections"><span>Classic Collection</span></a>
    </li>
    <li class="coll_item active">
      <a title="title" class="collections"><span>Ultimate Collection</span></a>
    </li>
    <li class="coll_item">
      <a title="title" class="collections"><span>Luxurious Collection</span></a>
    </li>
  </ul>
</div>

【讨论】：

【解决方案2】：

删除

white-space: nowrap;

这会阻止文本环绕。

小提琴here

【讨论】：

【解决方案3】：

我认为你可以这样做：

#coll_container .coll_item a span {
 display: flex;
 align-items: center;
 justify-content: center;
 font-weight: 600;
 border-radius: 50%;
 width: 95px;
 height: 95px;
 padding:2px;
 border: solid 3px #fff;}

【讨论】：