Question

我正在尝试制作一个基本的3列博客模板。左侧列将被固定，顶部有标题，下方有个人资料图片，下方有导航链接，右侧内容会滚动。我不能把标题集中在左边的div中;我认为使用保证金居中之间存在冲突：0 auto与位置：固定列。

CSS

#container {
    top: 0;
    left: 0;
    min-height: 100%;
    min-width: 100%;
    z-index: -99999;
}

#sideLeft-bar { 
    left: 0;
    top: 0;
    width: 300px;
    min-height: 100%;
    color: #646f7b;
    background-color: #363f48;
    position: relative;
    position: fixed;
}

div#title {
    width: 300px;
    color: #FF4000;
    font-size: 200%;
    margin: 0 auto;
}

img#resize-profile {
    width: 200px;
    height: auto;
    padding: 170px 20px 0 40px;
    z-index: 99999;
    position: fixed;
}

div#nav-left {
    padding: 400px 20px 40px 40px;
    color: #646f7b;
    font-size: 125%;
    margin: 0 0 0.75 0;
    line-height: 1.25em;
    position: absolute;
    position: fixed;
}

.content {
    position: absolute;
    width: 650px;
    left: 300px;
    padding: 30px;
    color: #505050;
    font-size: 100%;
    line-height: 1.5em; 
}

HTML

<div id="container"> <!--BEGIN OUTER DIV-->
    <div id="sideLeft-bar">
        <div id="title">
            <p>
                Love Sosa
            </p>
        </div>
    </div> <!--creates fixed sidebar-->

    <img id="resize-profile" src="images/profile.png">

    <div id="nav-left">
        <ul>
            <li>These</li>
            <li>Skitches</li>
            <li>Love</li>
        </ul>
    </div>

    <div class="content">
            <p>
                some content
            </p>
    </div>

        <div id="sideRight-bar">
            Stuff in here
        </div>
</div>

几点说明：

1。）这将是用户注册博客时唯一可用的模板。我使用这么多位置的原因是我不希望内容移动任何位置（EX：一个人有一个标题需要两行 - 我不希望他们的个人资料照片和导航被移动）

2。）内容（标题，个人资料图片，导航链接）直接与sideBar-left定位，但我给了他们

3。）我会从头开始重新尝试，然后再试一次，但是我想知道要进去的方向，因为浮动，位置以及位置突破边缘是如何与我的头撞在一起的。

以下是它的外观截图：https://www.dropbox.com/s/2m394zjtdj5505k/Screenshot%202014-02-17%2011.32.09.png

Answer 1

默认情况下，块元素的宽度为100％，内联元素默认为自然宽度。在大多数情况下，您希望在文本的父级上声明text-align: center;。您也可以将您的肖像设为display: inline-block;

您将遇到的一个主要问题是，几乎所有触摸设备，或者更确切地说，浏览器的触摸设备，都不能很好地理解固定定位。如果您尝试在新型触摸式台式计算机或平板电脑上滚动它，固定定位将会四处跳转并且看起来非常糟糕和错误。

此外，您应该考虑将移动设备放在首位 - 并做出响应。

你可以使用modernizr测试触摸事件，基本上说，如果没有触摸事件......那么我几乎可以认为它是一个标准的桌面，有一个鼠标等，只有这种情况 - 让元素你想要修复。

你不只是为今天制作网站 - 在一年左右的时间里，谁知道会是什么样的设备，所以我建议你退后一步，真正深入了解定位并了解相对和绝对的合作方式，以及浮动的工作原理。

我提出了你想要做的事情的现代看法。我希望它有用。祝你好运。

http://jsfiddle.net/sheriffderek/b3kWR/

Answer 2

text-align: center div#title

div#title {
    width: 300px;
    color: #FF4000;
    font-size: 200%;
    margin: 0 auto;
    text-align: center;
}

Answer 3

快速输入问题中的第1点。如果用户的标题超过两行，它将过度到右边的div。您需要设置高度和overflow: hidden以防止这种情况发生。但我相信你会想出来的。

另一点是您已使用 padding 水平定位元素。有了这样的设计，它可能没有多大意义，但设置这些元素的高度是一种更好的做法。

关于点nr3，在你的设计中使用 fix-width 布局可能就足够了，但 float 我不是最好的选择，你可以看看在display: inline-block，可以为将来干预布局增加灵活性，让你获得良好的CSS设计实践。

我不是专家，但我认为我的建议会对你有帮助。

无法将文本居中于固定位置列

3 个答案: