Question

我希望我的新闻内容完全居中（包括图片和文字），相反，它奇怪地放在右边，如下所示： http://prntscr.com/3o7tjc

我尝试了大多数方法来修复它，我找不到它......嗯...... 这是HTML部分：

<div id="mainContentContainer">
    <div id="mainContent">

        <div class="postTitle">
            test
        </div>
        <div class="posterInfo">
            <img width="40%" class="profilePic" src="/site/uploads/avatars/f3780c97491dd9f62f0dd7b1b8bb090a0b9e87d0.png">
            <p>Posted by: <a class="postedBy" href="#">test</a></p>
        </div>
        <div class="postContent">
            <div class="postImageContainer" align="center">
                <img class="postImage" src="../uploads/img/test">
            </div>

            <div class="post">
                <p>test</p>
            </div>
            Comments have been disabled for this post.</div>
        </div>
        <div id="sidebar">
            Welcome, Admin<br><a href="logout.php">Logout</a><br>
        </div>
    </div>
</div>

Annnd，这是CSS。

body {
    margin: 0px;
    background-color: #6C9DDF;
    background-image:url("/assets/img/background.png");
    background-repeat: no-repeat;
}


.hq {
    position:relative;
    top:40px;
    width:1300px;
    height:100%;
    left:1%;
}
#logo {
    position:absolute;
    width:40%;
    height:30%;
    right:30%;
    z-index: 100;
}
#homebtn, #playbtn, #newsbtn, #helpbtn {
    background: url(/assets/img/menubtns.png) no-repeat;
}
#homebtn {
    background-image: url("/assets/img/home.png");
    background-repeat:no-repeat;
    background-size: 75%;
    width: 204px;
    height: 184px;
    position: absolute;
    top: 318px;
    left: 353px;
}
#homebtn:hover {
    background-image: url("/assets/img/home-rollover.png");
}
#playbtn {
    background-image: url("/assets/img/play.png");
    background-repeat:no-repeat;
    background-size: 100%;
    width: 200px;
    height: 230px;
    position: absolute;
    top: 240px;
    left: 480px;
}
#playbtn:hover {
    background-image: url("/assets/img/play-rollover.png");
}
#newsbtn {
    background-image: url("/assets/img/news.png");
    background-repeat:no-repeat;
    background-size: 100%;
    width: 290px;
    height: 290px;
    position: absolute;
    top: 210px;
    left: 650px;
}
#newsbtn:hover {
    background-image: url("/assets/img/news-rollover.png");
}
#helpbtn {
    background-image: url("/assets/img/help.png");
    background-repeat:no-repeat;
    background-size: 100%;
    width: 330px;
    height: 380px;
    position: absolute;
    top: 180px;
    left: 930px;
}
#helpbtn:hover {
    background-image: url("/assets/img/help-rollover.png");
}

#mainContentContainer {
    border-radius: 30px 30px 30px 30px;
    -moz-border-radius: 30px 30px 30px 30px;
    -webkit-border-radius: 30px 30px 30px 30px;
    border: 8px solid #000000;
    background-color: #FFE12F;
    position: relative;
    width: 1200px;
    top: 60px;
    left: 8%;
    padding: 50px;
    overflow: hidden;
  height: 100%; 
  position: relative
}
#mainContent {
    position: relative;
    border-radius: 30px 30px 30px 30px;
    -moz-border-radius: 30px 30px 30px 30px;
    -webkit-border-radius: 30px 30px 30px 30px;
    border: 0px solid #000000;
    background-color: #ffffff;
    height: 100%;
    padding: 20px;
    float: left;
    width: 900px;
}
#sidebar {
    position: relative;
    border-radius: 30px 30px 30px 30px;
    -moz-border-radius: 30px 30px 30px 30px;
    -webkit-border-radius: 30px 30px 30px 30px;
    border: 0px solid #000000;
    background-color: #ffffff;
    height: 100%;
    padding: 20px;
    float: right;
    width: 200px;
}
.postTitle {
    font-size: 40px;
    font-weight: bold;
    color: #515151;
    text-align: center;
}

.text {
    text-align: center;
}
.title {
    text-decoration: none;
    color: #515151;
}
.title:visited {
    text-decoration: none;
    color: #515151;
}
.title:hover {
    text-decoration: underline;
}
.postedBy {
    text-decoration: none;
}
.posterInfo {
    float: left;
    padding: 5px;
}
.postContent {
    overflow: hidden;
}
.postImageContainer {
    padding: 5px;
}
.postImage {
    width: 100%;
    position:relative;
}
.profilePic {
    border-radius: 30px 30px 30px 30px;
    -moz-border-radius: 30px 30px 30px 30px;
    -webkit-border-radius: 30px 30px 30px 30px;
    border: 0px solid #000000;
}
.registerFormWrapper {
    float: left;
    width: 50%;
}
.commentFormContainer {
    margin-top: 45px;
}
.commentContent {
    border-radius: 30px;
    overflow: auto;
    resize: none;
    padding: 10px;
    outline: none;
}
.commentBTN {
    background: url("../img/comment.png");
    width: 269px;
    height: 260px;
    border: none;
    position: relative;
    top: -50px;
    cursor: pointer;
    text-indent: -999px;
}
.commentBTN:hover {
    background: url("../img/commentHover.png");
}
.ToonName {
    font-weight: bold;
    font-size: 20px;
}
.ToonNameInput {
    border-radius: 30px;
    padding: 5px;
    outline: none;
}
.commentBTNS {
    outline: none;
}
.commentFormInputContainer {
    width: 60%;
    float: left;
}
.registerInput {
    border-radius: 30px;
    padding: 5px;
    outline: none;
}
.loginInput {
    border-radius: 30px;
    padding: 5px;
    outline: none;
}
.inputLabel {
    display: inline-block;
    float: left;
    width: 200px;
    font-size: 20px;
    font-weight: bold;
}

我尝试更改大多数可能的组合，但它并没有完全正常工作......

这是小提琴 - http://jsfiddle.net/2EYYC/

：编辑：好吧，我确实使用了我被告知的东西并且它确实有效但看起来我被某种阻挡视图的条形卡住了。

Answer 1

基于对OP的理解，这是一个解决方案。我为css类width

添加了profilePic像素

.profilePic {
    border-radius: 30px 30px 30px 30px;
    -moz-border-radius: 30px 30px 30px 30px;
    -webkit-border-radius: 30px 30px 30px 30px;
    border: 0px solid #000000;
    width: 120px; /* Width added here */
}

我添加的原因 - 由于您提到width为40％并且没有为父级定义宽度，因此无法正确获取宽度。将width更改为像素就可以了。

<强> FIDDLE

很奇怪的CSS

1 个答案: