Question

我的问题：我怎样才能＆＃34;居中＆＃34;这些图像让Headers左对齐看起来干净了吗？

我刚刚意识到我没有为网站上的不同大小的图标做出规划，我想知道是否有快速，非hacky 解决方案。 由于项目的规模，我无法以任何方式编辑HTML。

我可以使用Psudeo和calc解决方案

编辑：设置固定宽度会导致网站上出现明显的模糊和/或使较高的图标太小

的jsfiddle http://jsfiddle.net/vantbrhb/

Answer 1

您可以尝试添加此类，并查看图像的显示方式：

.search_option_box li {
    display: inline;
    border: 1px solid black;
    border-collapse: collapse;
    line-height: 2em;
    padding: 20px 75px;
    background: rgba(24, 24, 24, 0.6);
    color: #FFFFFF;
}

Answer 2

您可以将position:absolute;提供给h5，然后将其与left方对齐;

Jsfiddle

Answer 3

我没有意识到你无法修改HTML - 忽略我的上一篇文章。这是一个伪选择器，应根据＆＃34; src＆＃34;选择每个图像。希望第三次魅力：

img[src*="placehold.it/50x50"] {
    padding-left: 6px;
    padding-right: 5px;
}
img[src*="placehold.it/55x49"] {
    padding-left: 3px;
    padding-right: 3px;
}
img[src*="placehold.it/48x52"] {
    padding-left: 7px;
    padding-right: 6px;
}
img[src*="placehold.it/50x54"] {
    padding-left: 6px;
    padding-right: 5px;
}

Answer 4

从img中删除边框和填充，然后添加以下样式：

.content {
  position: relative;
  overflow: hidden;             /*prevent tall lines from overflowing containers */
}

.content h5 {
  position: absolute;
  left: 70px;                   /*wider than your widest image */
  top: 50%;                     /*center vertically            */
  transform: translateY(-50%);  /*  "        "                 */
}

.content h5:before {
  content: '';
  position: absolute;
  height: 1000px;               /*really tall!         */
  top: -500px;
  left: -5px;                   /*for a little padding */
  border-left: 1px solid black;
}

Fiddle

Answer 5

你可以使用这样一些简单的javascript来实现：

function getWidth(){
var width1 = document.getElementById('img1').offsetWidth;
var width2 = document.getElementById('img2').offsetWidth;
var width3 = document.getElementById('img3').offsetWidth;
var width4 = document.getElementById('img4').offsetWidth;
width1 = 70 - width1;
width2 = 70 - width2;
width3 = 70 - width3;
width4 = 70 - width4;
document.getElementById('img1').style.paddingRight = width1 + "px";
document.getElementById('img2').style.paddingRight = width2 + "px";
document.getElementById('img3').style.paddingRight = width3 + "px";
document.getElementById('img4').style.paddingRight = width4 + "px";
}

请参阅小提琴：http://jsfiddle.net/vantbrhb/6/

Answer 6

代码并不漂亮，但是如果你可以为每个img添加＃img1，img2，＃img3和＃img4的ID，那么下面的代码应该可以解决这个问题：

#img1 {
    padding-left: 6px;
    padding-right: 5px;
}
#img2 {
    padding-left: 3px;
    padding-right: 3px;
}
#img3 {
    padding-left: 7px;
    padding-right: 6px;
}
#img4 {
    padding-left: 6px;
    padding-right: 5px;
}

Answer 7

你可以进行CSS表格布局，最好将img包装到span左右，但它仍然无法正常工作。

<强> jsfiddle

＆＃13;

.container {
    margin: 0 auto;
    width: 50%;
    display: table;
    border-collapse: separate;
    border-spacing: 0 1px;
}
.content {
    display: table-row;
    background: pink;
}
img, h5 {
    margin: 0;
    display: table-cell;
    vertical-align: middle;
}
img {
    padding-right: 5px;
}
h5 {
    width: 100%;
    border-left: 1px solid black;
    padding-left: 5px;
}

＆＃13;

<div class="container">
    <div class="content">
        <img src="http://placehold.it/50x50" />
        <h5>Header 1</h5>
    </div>
    
    <div class="content">
        <img src="http://placehold.it/55x49" />
        <h5>Header 2</h5>
    </div>
    
    <div class="content">
        <img src="http://placehold.it/48x52" />
        <h5>Header 3</h5>
    </div>
    
    <div class="content">
        <img src="http://placehold.it/50x54" />
        <h5>Header 4</h5>
    </div>
</div>

＆＃13;

对齐不同父级容器的不同大小的图像

7 个答案: