中心 DIV 内容流体垂直和水平

发布于 2024-12-26 03:12:49 字数 699 浏览 4 评论 0原文

这是我的示例：

在此处输入图像描述

行高不适用于流体 div。我的代码当前基于行高，但框的大小发生了变化。 那么我怎样才能让链接（内容）始终位于正中间？

我想确保此 DIV 内的内容始终从顶部和侧面均匀居中。垂直和水平居中。

当前代码：（注意样式标签为空，因为这是动态填充的）

    <style type="text/css">
    .box{
    width:468px; /* php changes this sometimes */
    height:60px; /* php changes this sometimes */
    background:#eee;
    text-align:
    center;
    border:
    1px solid rgb(177, 172, 171);
    line-height: 61px;
    }
    </style>

    <div style="" class="box" id="">
<a style="color:#333;font-weight:bold" href="claimPrize();">Winner!</a>
</div>

原文

This is the example I have:

enter image description here

Line height does not apply to fluid divs. The code I have is currently based on line-height but the the sizes of the boxes change. So how can I have a link (content) always in the exact middle?

I want to make sure that the content inside this DIV is always going to be equally centered from the top and the sides. Vertical and Horizontal centered.

Current code: (note style tag is blank as this is dynamic filled)

    <style type="text/css">
    .box{
    width:468px; /* php changes this sometimes */
    height:60px; /* php changes this sometimes */
    background:#eee;
    text-align:
    center;
    border:
    1px solid rgb(177, 172, 171);
    line-height: 61px;
    }
    </style>

    <div style="" class="box" id="">
<a style="color:#333;font-weight:bold" href="claimPrize();">Winner!</a>
</div>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

断肠人 2025-01-02 03:12:49

不久前遇到了类似的情况，进行了搜索，发现了一篇关于 css-tricks 绝对居中的文章，这里是这篇文章和一个随附的小提琴来测试它。

CSS

/* This parent can be any width and height */
.block {
  text-align: center;
}

/* The ghost, nudged to maintain perfect centering */
.block:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

/* The element to be centered, can
   also be of any width and height */
.centered {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
}

HTML

<div class="block" style="height: 300px;">

    <div class="centered">
        <h1>Some text</h1>
        <p>But he stole up to us again, and suddenly clapping his hand on my shoulder, said—"Did ye see anything looking like men going towards that ship a while ago?"</p>
    </div>

</div>

<div class="block" style="height: 200px;">

    <div class="centered">
        <h1>Some text</h1>
        <p>But he stole up to us again, and suddenly clapping his hand on my shoulder, said—"Did ye see anything looking like men going towards that ship a while ago?"</p>
    </div>

</div>

<div class="block" style="height: 600px;">

    <div class="centered">
        <h1>Some text</h1>
        <p>But he stole up to us again, and suddenly clapping his hand on my shoulder, said—"Did ye see anything looking like men going towards that ship a while ago?"</p>
    </div>

</div>

演示

http://jsfiddle.net/andresilich/YqKMH/

Ran into a similar situation not too long ago, did a search and found an article about absolute centering from css-tricks, here is the article and an accompanying fiddle to test it out.

CSS

/* This parent can be any width and height */
.block {
  text-align: center;
}

/* The ghost, nudged to maintain perfect centering */
.block:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

/* The element to be centered, can
   also be of any width and height */
.centered {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
}

HTML

<div class="block" style="height: 300px;">

    <div class="centered">
        <h1>Some text</h1>
        <p>But he stole up to us again, and suddenly clapping his hand on my shoulder, said—"Did ye see anything looking like men going towards that ship a while ago?"</p>
    </div>

</div>

<div class="block" style="height: 200px;">

    <div class="centered">
        <h1>Some text</h1>
        <p>But he stole up to us again, and suddenly clapping his hand on my shoulder, said—"Did ye see anything looking like men going towards that ship a while ago?"</p>
    </div>

</div>

<div class="block" style="height: 600px;">

    <div class="centered">
        <h1>Some text</h1>
        <p>But he stole up to us again, and suddenly clapping his hand on my shoulder, said—"Did ye see anything looking like men going towards that ship a while ago?"</p>
    </div>

</div>

Demo

http://jsfiddle.net/andresilich/YqKMH/

回复收藏 0 原文

~没有更多了~