Question

我正在尝试将“Flavor One”文本对齐用于列表项目符号的图像中间（请参阅下面的CSS）。目前它处于最底层。

我尝试过垂直对齐，行高，但没有任何效果。

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元素上的背景图像。这将为您提供理想的结果，而不会让您头疼。

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 2

list-style-image不是很好的解决方案......试试这个

.flavors li {
	list-style-type: none;
	display: flex;
	align-items: center;
	margin-bottom: 10px;
}

.flavors li:before {
	content: '';
	display: block;
	margin-right: 10px;
	width: 54px;
	height: 69px;
	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/

如何在ul列表类型图像的中间对齐li文本

2 个答案: