垂直对齐的锚文本？

发布于 2024-12-10 18:30:01 字数 1220 浏览 1 评论 0原文

你可能经常看到这个问题。但是，我已经经历了很多线程，但似乎无法找到适合我的情况的解决方案。这可能是我错过的一些非常微小的事情，或者也许我只是一起吠错了树。

基本上我想做的是使用带有设定高度和宽度的 {display:block;} 锚点，并使其文本垂直和水平居中。

现在这是我的css

.logo
{
    width:140px;
    height:75px;
    border-right:1px dotted black;
    border-bottom:1px dotted black;
    float:left;
    text-align:center;
    font-size:15px;
    font-weight:bold;
    color:#c60606;
}

.logo a
{
    display:block;
    width:140px;
    height:75px;
    background-color:#fff;
    font-size:15px;
    font-weight:bold;
    color:#c60606;
}
/*the reason for the double declaration of text information is because
  some of the logo divs do not have anchors in them, and it's for uniformity
  purposes.
*/

.logo a div
{
    margin-top:10px;
}

，然后是html。

<div class="logo"><a href="#"><div>my link</div></a></div>

现在我在锚点内插入一个div的原因是因为我认为这是将文本与实际块分开的好方法，但是通过该边距设置，它会移动锚定下来而不仅仅是文本。 Vertical-align 属性基本上没有任何作用，我不知道该怎么做。任何建议或重组想法都会很棒。谢谢。

可以在 http://www.dsi-usa.com/test/clientele 找到示例.php 请随意浏览该网站，它仍在进行中，很多工作需要组织和重新编码。无论如何，该示例正是我想要的，只需要文本也垂直对齐即可。

原文

you probably see this question a lot. However, I've been through threads and I can't seem to find a solution to my situation. It's probably something very minute that I'm missing, or perhaps I'm just barking up the wrong tree all together.

Basically what I'm trying to do is take an anchor with a {display:block;} with a set height and width and have its text be vertically and horizontally centered.

Right now this is my css

.logo
{
    width:140px;
    height:75px;
    border-right:1px dotted black;
    border-bottom:1px dotted black;
    float:left;
    text-align:center;
    font-size:15px;
    font-weight:bold;
    color:#c60606;
}

.logo a
{
    display:block;
    width:140px;
    height:75px;
    background-color:#fff;
    font-size:15px;
    font-weight:bold;
    color:#c60606;
}
/*the reason for the double declaration of text information is because
  some of the logo divs do not have anchors in them, and it's for uniformity
  purposes.
*/

.logo a div
{
    margin-top:10px;
}

and then the html would be

<div class="logo"><a href="#"><div>my link</div></a></div>

Now the reason i stuck a div inside of the anchor is because I thought it would be a good way to separate the text from the actual block, but with that margin setting it moves the anchor down instead of just the text. The vertical-align attribute does basically nothing, and I'm at a loss in terms of what to do. Any suggestions or restructuring ideas would be great. Thank you.

a sample can be found at http://www.dsi-usa.com/test/clientele.php feel free to browse the site it's still a work in progress a lot has to be organized and re-coded. Anyhow, that sample is exactly what I want, just need the text to be vertically aligned as well.

分享到QQ

分享到微博

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

发布评论

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

記柔刀 2024-12-17 18:30:01

如果您将包含框（您的锚点 - 只需放弃内部 div，您不需要它）的行高设置为等于其高度，那么单行文本将是垂直的居中。如果你需要换行，事情就会变得更加复杂。

这是一个只有一个锚元素的小提琴，用于演示更简单的场景： http://jsfiddle.net/vdkAb/1/

<强>更新
...如果你不需要担心 IE6/7 支持（你很幸运！），那么你可以使用 display:table-cell，它可以毫不费力地工作 - 无需指定行高 - 即使有多行，像这样： http://jsfiddle.net/PH5Yw/

回复收藏 0 原文

爱要勇敢去追 2024-12-17 18:30:01

中不能有

，它是无效的 HTML。请改用设置为 display: block; 的。

更新：

从 HTML5 开始，您现在可以在锚点（或任何块级元素）内放置一个 div。

不过，为了使其合法，您必须使用 HTML5 文档类型：

<!DOCTYPE html>

You can't have a <div> inside an <a>, it's invalid HTML. Use a <span> set to display: block; instead.

Update:

As of HTML5, you can now have a div inside an anchor (or any block level element.)

For this to be legal though, you must use the HTML5 doctype:

<!DOCTYPE html>

回复收藏 0 原文

无声无音无过去 2024-12-17 18:30:01

这通常对我有用

$(function(){
    
    $("button").click(function(){
        $(".navbar").toggleClass("large");
    });
    
});

*{
    box-sizing: border-box;
}

.navbar{
    display: flex;
    color: white;
    background: black;
    height: 30px;
    margin-bottom: 10px;
    transition: all 0.25s ease;
}

.navbar.large{
    height: 120px;
}

a{
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-right: 20px;
    padding: 0 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navbar">
    <a>TITLE</a>
    <a>Contact</a>
    <a>About Us</a>
</div>
<button>Change Nav Size</button>

只是想我应该把它放在那里:)

仅当链接容器是 display: flex 时才有效

This usually works for me

$(function(){
    
    $("button").click(function(){
        $(".navbar").toggleClass("large");
    });
    
});

*{
    box-sizing: border-box;
}

.navbar{
    display: flex;
    color: white;
    background: black;
    height: 30px;
    margin-bottom: 10px;
    transition: all 0.25s ease;
}

.navbar.large{
    height: 120px;
}

a{
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-right: 20px;
    padding: 0 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navbar">
    <a>TITLE</a>
    <a>Contact</a>
    <a>About Us</a>
</div>
<button>Change Nav Size</button>

Just thought I should put this out there :)

Works only when the link container is display: flex

回复收藏 0 原文

~没有更多了~