在动态高度div

时间：2015-10-20 19:30:19

标签： html css

我一直在拉我的头发试图垂直制作一个div中心。

div本身包含svg图像，图像下方有一些文本，并且向右浮动并显示内联块。在图像的左侧，也在容器div中，是一些显示标题的文本。如果标题的文本跨越＆gt; 1行呈现，则图像必须在中间浮动。

这意味着身高是动态的，我不会提前知道。

我已经尝试过这个问题的表解决方案，但由于我想要垂直居中的div已经显示，所以无法让它工作：inline-block并且无法弄清楚如何使它适用于display：table。< / p> 

.like-container {
  
}

.like-div {
	display: inline-block;
	float: right;
	font-size: 10px;
	margin-right: 100px;
}

.title {
	font-size: 40px;
	width: calc(100% - 100px);
}
<div class="like-container">
      <div class="like-div">
        <svg xmlns:x="http://ns.adobe.com/Extensibility/1.0/" xmlns:i="http://ns.adobe.com/AdobeIllustrator/10.0/" xmlns:graph="http://ns.adobe.com/Graphs/1.0/" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 283.46 283.46" enable-background="new 0 0 283.46 283.46" xml:space="preserve"><metadata><sfw xmlns="http://ns.adobe.com/SaveForWeb/1.0/"><slices/><sliceSourceBounds x="12.691" y="27.241" width="269.84" height="254.219" bottomLeftOrigin="true"/></sfw></metadata><path d="M12.691,251.967c0,2.349,1.904,4.252,4.252,4.252h38.293c2.348,0,4.252-1.903,4.252-4.252V131.653  c0-2.348-1.904-4.252-4.252-4.252H16.943c-2.348,0-4.252,1.904-4.252,4.252V251.967z"/><path d="M278.918,147.336c-8.606-14.737,11.983-21.831-5.778-35.607c-22.375-17.355-20.925-14.647-69.32-15.194  c-7.65-0.086-17.099,0.772-14.633-15.114c9.885-63.703-6.41-75.53-17.217-78.504c-22.753-6.26,4.787,19.854-23.702,68.758  c-2.513,4.313-10.086,9.271-15.194,17.567c-10.544,17.125-20.681,44.156-29.436,44.156c-6.252,0-22.42,0-36.091,0v108.504  c20.458-1.617,49.586-3.924,56.862-4.523c11.514-0.949,21.01,6.97,38.104,6.97c15.194,0,24.823,9.421,76.594,1.481  c7.314-1.121,20.896-15.174,18.194-26.576c-2.084-8.804,22.768-15.721,17.405-31.809  C268.403,168.538,290.992,168.011,278.918,147.336z"/></svg>
        <span>Like</span>
      </div>
      <div class="title">
        This is the Title!
      </div>
    </div>

我创建了一个plnkr来帮助向您展示它的外观：http://plnkr.co/edit/qzqTjQ8W7jl72nRKd6Sj

甜蜜的耶稣帮助我！

4 个答案:

答案 0 :(得分：1)

您可以使用Flexbox实现垂直居中。这是代码

小提琴：https://jsfiddle.net/qbyxkf71/

<强> HTML 

<div class="like-container">
        <div class="title">This is the Title!</div>
    <div class="like-div">
        <svg xmlns:x="http://ns.adobe.com/Extensibility/1.0/" xmlns:i="http://ns.adobe.com/AdobeIllustrator/10.0/" xmlns:graph="http://ns.adobe.com/Graphs/1.0/" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 283.46 283.46" enable-background="new 0 0 283.46 283.46" xml:space="preserve">
            <path d="M12.691,251.967c0,2.349,1.904,4.252,4.252,4.252h38.293c2.348,0,4.252-1.903,4.252-4.252V131.653  c0-2.348-1.904-4.252-4.252-4.252H16.943c-2.348,0-4.252,1.904-4.252,4.252V251.967z" />
            <path d="M278.918,147.336c-8.606-14.737,11.983-21.831-5.778-35.607c-22.375-17.355-20.925-14.647-69.32-15.194  c-7.65-0.086-17.099,0.772-14.633-15.114c9.885-63.703-6.41-75.53-17.217-78.504c-22.753-6.26,4.787,19.854-23.702,68.758  c-2.513,4.313-10.086,9.271-15.194,17.567c-10.544,17.125-20.681,44.156-29.436,44.156c-6.252,0-22.42,0-36.091,0v108.504  c20.458-1.617,49.586-3.924,56.862-4.523c11.514-0.949,21.01,6.97,38.104,6.97c15.194,0,24.823,9.421,76.594,1.481  c7.314-1.121,20.896-15.174,18.194-26.576c-2.084-8.804,22.768-15.721,17.405-31.809  C268.403,168.538,290.992,168.011,278.918,147.336z" />
        </svg> <span>Like</span>

    </div>

</div>

<强> CSS 

.like-container {
    border:1px solid;
    display:flex;
    align-items:center;
}
.like-div {
    display: inline-block;
    float: right;
    font-size: 10px;
    margin-right: 100px;
}
.title {
    font-size: 40px;
    width: calc(100% - 100px);
}

答案 1 :(得分：1)

我建议使用flexbox + align-items来居中+ order来控制位置，扩展现有标记，查看support details以及相关前缀。

<强> jsfiddle 

.like-container {
    display: flex;
    align-items: center;
}
.like-div {
    font-size: 10px;
    margin-right: 100px;
    order: 1;
}
.title {
    font-size: 40px;
    flex: 1;
}

如果您需要支持IE9，可以使用此CSS表格布局，但是您需要调整标记，将<div class="title">放在<div class="like-div">之前。

<强> jsfiddle 

.like-container {
    display: table;
    width: 100%;
}
.title, .like-div {
    display: table-cell;
    vertical-align: middle;
}
.title {
    font-size: 40px;
    width: 100%;
}
.like-div {
    font-size: 10px;
    padding-right: 100px;
}

答案 2 :(得分：1)

您可以使用direction并放弃float :(对于旧浏览器）

.like-container {
  direction: rtl;
}
.like-div {
  display: inline-block;
  font-size: 10px;
  vertical-align: middle;
  width: 2em;
  direction: ltr;
}
.title {
  font-size: 40px;
  width: calc(100% - 0.65em);
  display: inline-block;
  vertical-align: middle;
  direction: ltr;
}
<div class="like-container">
      <div class="like-div">
        <svg xmlns:x="http://ns.adobe.com/Extensibility/1.0/" xmlns:i="http://ns.adobe.com/AdobeIllustrator/10.0/" xmlns:graph="http://ns.adobe.com/Graphs/1.0/" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 283.46 283.46" enable-background="new 0 0 283.46 283.46" xml:space="preserve"><metadata><sfw xmlns="http://ns.adobe.com/SaveForWeb/1.0/"><slices/><sliceSourceBounds x="12.691" y="27.241" width="269.84" height="254.219" bottomLeftOrigin="true"/></sfw></metadata><path d="M12.691,251.967c0,2.349,1.904,4.252,4.252,4.252h38.293c2.348,0,4.252-1.903,4.252-4.252V131.653  c0-2.348-1.904-4.252-4.252-4.252H16.943c-2.348,0-4.252,1.904-4.252,4.252V251.967z"/><path d="M278.918,147.336c-8.606-14.737,11.983-21.831-5.778-35.607c-22.375-17.355-20.925-14.647-69.32-15.194  c-7.65-0.086-17.099,0.772-14.633-15.114c9.885-63.703-6.41-75.53-17.217-78.504c-22.753-6.26,4.787,19.854-23.702,68.758  c-2.513,4.313-10.086,9.271-15.194,17.567c-10.544,17.125-20.681,44.156-29.436,44.156c-6.252,0-22.42,0-36.091,0v108.504  c20.458-1.617,49.586-3.924,56.862-4.523c11.514-0.949,21.01,6.97,38.104,6.97c15.194,0,24.823,9.421,76.594,1.481  c7.314-1.121,20.896-15.174,18.194-26.576c-2.084-8.804,22.768-15.721,17.405-31.809  C268.403,168.538,290.992,168.011,278.918,147.336z"/></svg>
        <span>Like</span>
      </div>
      <div class="title">
        This is<br/> the Title!
      </div>
    </div>

或使用display:flex;用于年轻浏览器（最有效的恕我直言）

.like-container {
  display: flex;
  flex-direction: row-reverse
}
.like-div {
  font-size: 10px;
  margin: auto;
}
.title {
  font-size: 40px;
  flex: 1
}
<div class="like-container">
      <div class="like-div">
        <svg xmlns:x="http://ns.adobe.com/Extensibility/1.0/" xmlns:i="http://ns.adobe.com/AdobeIllustrator/10.0/" xmlns:graph="http://ns.adobe.com/Graphs/1.0/" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 283.46 283.46" enable-background="new 0 0 283.46 283.46" xml:space="preserve"><metadata><sfw xmlns="http://ns.adobe.com/SaveForWeb/1.0/"><slices/><sliceSourceBounds x="12.691" y="27.241" width="269.84" height="254.219" bottomLeftOrigin="true"/></sfw></metadata><path d="M12.691,251.967c0,2.349,1.904,4.252,4.252,4.252h38.293c2.348,0,4.252-1.903,4.252-4.252V131.653  c0-2.348-1.904-4.252-4.252-4.252H16.943c-2.348,0-4.252,1.904-4.252,4.252V251.967z"/><path d="M278.918,147.336c-8.606-14.737,11.983-21.831-5.778-35.607c-22.375-17.355-20.925-14.647-69.32-15.194  c-7.65-0.086-17.099,0.772-14.633-15.114c9.885-63.703-6.41-75.53-17.217-78.504c-22.753-6.26,4.787,19.854-23.702,68.758  c-2.513,4.313-10.086,9.271-15.194,17.567c-10.544,17.125-20.681,44.156-29.436,44.156c-6.252,0-22.42,0-36.091,0v108.504  c20.458-1.617,49.586-3.924,56.862-4.523c11.514-0.949,21.01,6.97,38.104,6.97c15.194,0,24.823,9.421,76.594,1.481  c7.314-1.121,20.896-15.174,18.194-26.576c-2.084-8.804,22.768-15.721,17.405-31.809  C268.403,168.538,290.992,168.011,278.918,147.336z"/></svg>
        <span>Like</span>
      </div>
      <div class="title">
        This is<br/> the Title!
      </div>
    </div>

答案 3 :(得分：-1)

这可能会对你有帮助，这里是一个最普通形式的中心div 

div {
    width: 100px;
    height: 100px;
    border: 1px solid black;
    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}
<div>my div here</div>

相关问题
最新问题