Question

似乎我无法找到正确的类来将代理图像与下面的文本水平对齐。网站：http://hendersonrealestatepros.com/listings/2724-mintlaw-ave/

尝试

.connected-agents{
display: inline-block;
margin: auto;
width: 70%;
padding: 10px;
}

.connected-agents{
float: left;
width: 70%;
padding: 10px;
}

Answer 1

试试这个 -

#listing-agent .connected-agents { 
  display: table-row; 
  } 
  .agent-thumb, .agent-details { 
  display: table-cell; 
  vertical-align: middle; 
  padding-bottom: 20px; 
  }

Answer 2

我建议将margin: 0 auto;和float: none用于＃listing-agent，以使其与中心对齐。请让我知道您期望的输出

Answer 3

你有相当多的CSS类交互，这使得一个简单的解决方案有点困难，因为＆＃34;样式汤＆＃34; （样式覆盖样式重写样式）和标记可以改进。

我要做的一个主要假设是，您希望代理占据代理商上方段落的全部宽度。

从float: left;移除width: 48%;和#listing-agent（也可能是填充）。您有两个选择器为float设置width和#listing-agent。它们是#listing-agent, #contact-form {...}（在页面的<head>中）和#listing-agent, #listing-agent + #listing-contact {...}（在impress-agents.css第141行中）。我会从这些选择器中移除#listing-agent，因此它们是：#contact-form {...}和#listing-agent + #listing-contact {...}。
移除<div class="connected-agents">的孩子#listing-agent。

执行这两项操作会使代理部分的宽度与上面的段落相同。

现在水平对齐代理（图片下方的文字）。

请务必撤消您从其他答案添加的显示表内容。
将代理容器元素浮动到左侧。你有无数的CSS类可以挂钩，connected-agents vcard post-11274 employee type-employee status-publish has-post-thumbnail hentry offices-tr-realty job-types-broker-salesperson entry。使用哪种方式最适合您。如果您选择使用.connected-agents，请务必删除上述<div>。以下是一个选项：

#listing-agent .employee {
    float: left;
    width: auto; /* removes `width: 100%;` set by .hentry and .entry */
}

css对齐图像

3 个答案: