html - CSS 的边框和对齐问题

标签 html css

  1. 我希望顶部 logo div 中的元素居中。我不太确定该怎么做。

  2. 我的 navigation div 与 logo div 不匹配。即使我已将边距设置为 0px,div 之间仍然存在空间。

  3. 出于某种原因,我的占位符图形底部的填充比 logo div 中的其他任何地方都多。我需要做什么才能改变它?

<!DOCTYPE html>
<html>
<head>
    <title>css example</title>

<style type="text/css">

#logo {
    background-color: black;
    width: 100%;
    color: rgb(255,200,0);
    margin: 0px;
}

#logo p {
    display: inline;
}

#logo h2 {
    display: inline;
}

#logo a {
    float: right;
    color: rgb(255, 200, 0);
    text-decoration: none;
    font-size: 1.25em;
    padding: 10px;
}

#navigation {
    background-color: rgb(255,200,0);
    width: 100%;
    margin: 0px;
}

body {
    margin: 0px;
    font-family: Arial, Helvetica, Verdana;
}

</style>    
</head>

<body>    
<div id="logo">
    <p>
        <img src="picture.jpg" >
    </p>        
    <h2>SUBSCRIBER PORTAL</h2>      
    <a href="#">LOG-IN </a>
    <a href="#">CONTACT US </a>     
</div>    
<div id="navigation">
    <p>
        This is just a navigation test.
    </p>
</div>    
<div id="contents">    
    <p>This is just some dummy text. Dummy. </p>        
</div>

</body>
</html>

最佳答案

1) 给出 img { vertical-align:middle; } .还删除

周围的 img。 2)你试过了吗padding:0; ?。 3) padding-bottom:-<value here>px;或者你可以试试 padding:0;padding-bottom:0; . 我不确定这些问题,因为它们的设置不是很好。

关于html - CSS 的边框和对齐问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14948105/

相关文章:

javascript - 单击按钮时如何创建烟花

javascript - 自动点击刷新页面链接

html - 如何通过将图像堆叠在 div 中来在图像上设置功能区?

html - 悬停背景大于容器

html - 从查询字符串中提取整数

html - Bootstrap 调整大小问题

css - 浏览器在保存、重启和清除所有 cookie 后不应用新的 css

html - 通过 JSF 呈现时, Bootstrap 按钮没有水平填充

jquery - jsfiddle 示例不起作用

javascript - 整个表单 css 变灰