代码之家 › 专栏 › 技术社区 › ItFreak

HTML自定义列表图像中心文本

css html

ItFreak · 技术社区 · 6 年前

list-style-image . 示例在代码段中。有人能给我解释一下,如何使文本和图像居中,这样文本总是以图像居中,图像总是以文本居中(如果是多行的话)?我添加了一个简短的图片来阐明我想要达到的目标。

代码:

body {
  margin:0;
}
.container {
  display:flex;
  flex-wrap:wrap;    
  flex-direction:row;    
  height:100vh;
  background-color: white;
}
.container > div {
  min-height: 100vh;
  border: 1px solid black;
  box-sizing:border-box;
  background-color: inherit;
}

container > div .content{
  height: 100vh;
  width: 100vw;
  background-color: inherit;
}
.full-width {
  width:100%;              
}
.half-width {
  width:50%;
}

.half-width > .half-width-content{
  position: relative;
  margin-top: 0;
  height: 100%;
  width: 100%;
}

list-div {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.list-div ul {
  padding: 0;
  width: 75%;

}

.list-div li {
  position: relative;
  margin-bottom: 5px;
  padding: 10px;
  text-align: left;
  visibility: visible;
  text-transform: uppercase;
list-style-type: none;
}

.list-div li:nth-child(1){
background: url(https://fakeimg.pl/30x30/?text=A);
    list-style-type: none;
    margin: 0;
    padding: 10px 10px 10px 48px;
    vertical-align: middle;
    background-repeat: no-repeat;
 
}
.list-div li:nth-child(2){
background: url(https://fakeimg.pl/30x30/?text=B);
    list-style-type: none;
    margin: 0;
    padding: 10px 10px 10px 48px;
    vertical-align: middle;
    background-repeat: no-repeat;
 
}
.list-div li:nth-child(3){
background: url(https://fakeimg.pl/30x30/?text=C);
    list-style-type: none;
    margin: 0;
    padding: 10px 10px 10px 48px;
    vertical-align: middle;
    background-repeat: no-repeat;
 
}

.list-div li:nth-child(4){
background: url(https://fakeimg.pl/30x30/?text=D);
    list-style-type: none;
    margin: 0;
    padding: 10px 10px 10px 48px;
    vertical-align: middle;
    background-repeat: no-repeat;
 
}

 <div class="container">
<div class="half-width">
    <div class="half-width-content">
      <div class="list-div">
        <ul class="items-list" id="list">
          <li>List item A    
          XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</li>
          <li>List item B</li>
          <li>List item C</li>
          <li>List item D</li>
        </ul>
      </div>
    </div>
	</div>
  </div>
</div>

1 回复 | 直到 6 年前

Itay Gal 6 年前

background-position-y: 50%; 到 li

body {
  margin:0;
}
li{
 align-self: center;
}

.container {
  display:flex;
  flex-wrap:wrap;    
  flex-direction:row;    
  height:100vh;
  background-color: white;
}
.container > div {
  min-height: 100vh;
  border: 1px solid black;
  box-sizing:border-box;
  background-color: inherit;
}

container > div .content{
  height: 100vh;
  width: 100vw;
  background-color: inherit;
}
.full-width {
  width:100%;              
}
.half-width {
  width:50%;
}

.half-width > .half-width-content{
  position: relative;
  margin-top: 0;
  height: 100%;
  width: 100%;
}

list-div {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.list-div ul {
  padding: 0;
  width: 75%;

}

.list-div li {
  position: relative;
  margin-bottom: 5px;
  padding: 10px;
  text-align: left;
  visibility: visible;
  text-transform: uppercase;
list-style-type: none;
}


.list-div li:nth-child(1){
background: url(https://fakeimg.pl/30x30/?text=A);
    list-style-type: none;
    margin: 0;
    padding: 10px 10px 10px 48px;
    vertical-align: middle;
    background-repeat: no-repeat;
    background-position-y: 50%;
}
.list-div li:nth-child(2){
background: url(https://fakeimg.pl/30x30/?text=B);
    list-style-type: none;
    margin: 0;
    padding: 10px 10px 10px 48px;
    vertical-align: middle;
    background-repeat: no-repeat;
    background-position-y: 50%;
 
}
.list-div li:nth-child(3){
background: url(https://fakeimg.pl/30x30/?text=C);
    list-style-type: none;
    margin: 0;
    padding: 10px 10px 10px 48px;
    vertical-align: middle;
    background-repeat: no-repeat;
    background-position-y: 50%;
 
}

.list-div li:nth-child(4){
background: url(https://fakeimg.pl/30x30/?text=D);
    list-style-type: none;
    margin: 0;
    padding: 10px 10px 10px 48px;
    vertical-align: middle;
    background-repeat: no-repeat;
    background-position-y: 50%;
 
}
.list-div li{
    
}

<div class="container">
<div class="half-width">
    <div class="half-width-content">
      <div class="list-div">
        <ul class="items-list" id="list">
          <li>List item A    
          XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</li>
          <li>List item B</li>
          <li>
            <p>Multiple</p>
            <p>Paragraphs</p>
            <p>Works</p>
          </li>
          <li>List item D</li>
        </ul>
      </div>
    </div>
	</div>
  </div>
</div>