html - 将文本与其他 div 元素对齐答案

【问题标题】：html - Align text next to other div elementhtml - 将文本与其他 div 元素对齐
【发布时间】：2014-10-23 00:23:21
【问题描述】：

所以我的处境很奇怪。我正在尝试在左上角创建一个包含我的网站图标的标题，并在其下创建一个 Navigation div 元素（Img 覆盖了 Nav 元素）。我想要的是导航元素中的文本与左侧覆盖它的图片对齐。
这是我的情况图片（显然没有足够的代表来发布 img）：

http://i.imgur.com/qkVwwiw.png

这是 NAV 的 CSS：

.nav {
    line-height:30px;
    background-color:#eeeeee;
    height:70px;
    width:100%;   
    text-align:left;
    position: absolute;
    top: 70px;
    left: 0;
}

角落IMG：

div.cornerimg {
    margin: 5px;
    padding: 5px;
    height: auto;
    width: auto;
    position: absolute;
    top: 0;
    left: 70px;
}
div.cornerimg img {
    float: left;
    display: inline;
    margin: 5px;
    -webkit-border-bottom-right-radius: 151px;
    -webkit-border-bottom-left-radius: 151px;
    -moz-border-radius-bottomright: 151px;
    -moz-border-radius-bottomleft: 151px;
    border-bottom-right-radius: 151px;
    border-bottom-left-radius: 151px;
}

当然还有 HTML：

<div class="nav">
  <a href="home.htm"> Home |</a>
  <a href="download.htm">  Download |</a>
  <a href="suggestions.htm"> Suggestions |</a>
  <a href="https://sites.google.com/site/xeondosbatch/" target="_blank"> Google Site |</a>
</div>

<div class="cornerimg">
  <a href="home.htm">
    <img src="C:\Users\(User)\Desktop\Webpage\homeimg.png" alt="XeonDOS" width="250"             height="230">
  </a>
</div>

希望您能看到 img 后面的文本，但我想尝试将“XeonDOS”图像旁边的文本与文本重叠。

只要告诉我一些在 div 元素旁边居中文本的方法，那就太好了！

【问题讨论】：

能否请您发布 HTML 和 CSS？
好的，我来编辑一下。

标签： html css

【解决方案1】：

我对您的 HTML 结构做了一些改动。我用<div id="navcontainer"></div> 包装了你的菜单链接，并给它一个margin-left 或347px。

div.cornerimg {
    margin: 5px;
    padding: 5px;
    height: auto;
    width: auto;
    position: absolute;
    top: 0;
    left: 70px;
}
div.cornerimg img {
    float: left;
    display: inline;
    margin: 5px;
    -webkit-border-bottom-right-radius: 151px;
    -webkit-border-bottom-left-radius: 151px;
    -moz-border-radius-bottomright: 151px;
    -moz-border-radius-bottomleft: 151px;
    border-bottom-right-radius: 151px;
    border-bottom-left-radius: 151px;
}
.nav {
    line-height:30px;
    background-color:#eeeeee;
    height:70px;
    width:100%;
    text-align:left;
    position: absolute;
    top: 70px;
    left: 0;
}
div#navcontainer {
    margin-left: 347px;
}

<div class="nav">
    <div id="navcontainer"><a href="home.htm"> Home |</a>
 <a href="download.htm">  Download |</a>
 <a href="suggestions.htm"> Suggestions |</a>
 <a href="https://sites.google.com/site/xeondosbatch/" target="_blank"> Google Site |</a>

    </div>
</div>
<div class="cornerimg"> <a href="home.htm">
    <img src="http://placehold.it/350x150" alt="XeonDOS" width="250"             height="230">
  </a>

</div>

jsFiddle Demo。

【讨论】：

嘿，谢谢，我对这个话题有点困惑。我会尝试研究代码并尽可能多地理解它，但再次感谢！

【解决方案2】：

这是你需要做的事情的本质：

HTML：

<div id='wrapping-div'>
    <div id='image-div'></div>
    <div id='nav-div'></div>
</div>

CSS：

#wrapping-div {
    display: inline-block;        
}

【讨论】：

我已将代码放在帖子中，但似乎不起作用（不幸的是）。它似乎使叠加层失控，并且 Nav 元素位于顶部。而且我实际上还试图将文本放在 IMG 旁边的导航元素中。

【解决方案3】：

使用 .nav 离开 280 像素

left: 280px;

【讨论】：

是的，就是导航。但我试图让 NAV 元素中的文本位于 IMG 元素旁边。
padding-left:280px;