如何對齊ul列表類型圖像中間的li文本

Question

我試圖在用於列表項目符號的圖像中間對齊「Flavor One」文本（請參見下面的CSS）。目前它在底部。

我試過垂直對齊，行高，但沒有任何作品。

http://codepen.io/pares101/pen/NpWdPP

HTML

<ul class="flavors"> 
    <li class="tan sp flavor-size"> 
     Flavor one 
    </li> 
    <li class="tan sp flavor-size"> 
     Flavor One 
    </li> 
    <li class="tan sp flavor-size"> 
     Flavor One 
    </li> 
</ul> 

CSS

ul { 
    list-style-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADYAAABFCAYAAAAB8xWyAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDoxODZCNTlGRkYyMDMxMUU2OUQzQkFEMEFENkM4QTcwNyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDoxODZCNUEwMEYyMDMxMUU2OUQzQkFEMEFENkM4QTcwNyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkIwOTMzQTAwRjIwMTExRTY5RDNCQUQwQUQ2QzhBNzA3IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjE4NkI1OUZFRjIwMzExRTY5RDNCQUQwQUQ2QzhBNzA3Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+SdUY/QAACBFJREFUeNrMW0Fa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') 
} 

Answer 1

代替作爲list-style-image分配的圖像時，li元件上使用的背景圖像來代替。這會給你想要的結果，沒有頭痛。

ul { 
 
    list-style-type: none; /* Hide the default list styles */ 
 
} 
 

 
ul li { 
 
    min-height: 70px;  /* line-height and min-height should be equal */ 
 
    line-height: 70px;  /* because it creates vertical alignment of image and text */ 
 

 
    padding-left: 100px;  /* The distance from the background-image to the text */ 
 
    margin-bottom:50px;  /* The vertical spacing between each li element */ 
 

 
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADYAAABFCAYAAAAB8xWyAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDoxODZCNTlGRkYyMDMxMUU2OUQzQkFEMEFENkM4QTcwNyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDoxODZCNUEwMEYyMDMxMUU2OUQzQkFEMEFENkM4QTcwNyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkIwOTMzQTAwRjIwMTExRTY5RDNCQUQwQUQ2QzhBNzA3IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjE4NkI1OUZFRjIwMzExRTY5RDNCQUQwQUQ2QzhBNzA3Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+SdUY/QAACBFJREFUeNrMW0Fa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') no-repeat top left; 
 
}

<ul> 
 
    <li>Flavor one</li> 
 
    <li>Flavor two</li> 
 
    <li>Flavor three</li> 
 
</ul>

Answer 2

列表樣式圖像沒有很好的解決辦法......試試這個

.flavors li { 
 
\t list-style-type: none; 
 
\t display: flex; 
 
\t align-items: center; 
 
\t margin-bottom: 10px; 
 
} 
 

 
.flavors li:before { 
 
\t content: ''; 
 
\t display: block; 
 
\t margin-right: 10px; 
 
\t width: 54px; 
 
\t height: 69px; 
 
\t background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADYAAABFCAYAAAAB8xWyAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDoxODZCNTlGRkYyMDMxMUU2OUQzQkFEMEFENkM4QTcwNyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDoxODZCNUEwMEYyMDMxMUU2OUQzQkFEMEFENkM4QTcwNyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkIwOTMzQTAwRjIwMTExRTY5RDNCQUQwQUQ2QzhBNzA3IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjE4NkI1OUZFRjIwMzExRTY5RDNCQUQwQUQ2QzhBNzA3Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+SdUY/QAACBFJREFUeNrMW0Fa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) 
 
}

<ul class="flavors"> 
 
    <li class="tan sp flavor-size"> 
 
    Flavor one 
 
    </li> 
 
    <li class="tan sp flavor-size"> 
 
    Flavor One 
 
    </li> 
 
    <li class="tan sp flavor-size"> 
 
    Flavor One 
 
    </li> 
 
</ul>

的jsfiddle - https://jsfiddle.net/grinmax_/8w5y7mee/