发表新帖
发表新帖

Center contents of webpage

前端 未结
关注
7 1905
星月不相逢
星月不相逢 2020-12-06 20:32

I want to \"centerize\" the text and contents of my webpage. Now I don\'t want to align the text to center, I still want a left alignment but I want significant margins on t

相关标签:
7条回答
  • 北荒
    2020-12-06 20:41 
    <html>
<head>
<style type="text/css">

body {
   text-align: center; /* Center in IE */
}

#content {
   text-align: left; /* reset text-align for IE */
   margin: 0 auto; /* Center in other browsers */
   width: 800px;
}

html {
   overflow: -moz-scrollbars-vertical; /* Force vertical scrollbar in FF */
}

</head>
<body>
<div id="content">

   content here

</div>
</body>
</html>

    *UPDATE: I added some CSS that forces a vertical scrollbar in FF as per some comments below.

    0 讨论(0)
  • 迷失自我
    2020-12-06 20:42

    CSS:

    #container {
    max-width: 800px;
    margin: 0 auto;
}

    And in the HTML, wrap everything in:

    <div id='container'>
...
</div>

    (Note that this answer differs from meep's in that I'm using max-width to give a fluid layout below 800 pixels, whereas he's using width to give a fixed layout.)

    0 讨论(0)
  • 陌清茗
    2020-12-06 20:44

    Have a container div within which you put all your content:

    <html>
<head>
    <title>a sample</title>
</head>
<body>
    <div id="container">
         <h1>this is it</h1>
         <p>all content goes here</p>
    </div>
</body>

    Then add some css specifying the width and margins of your container div:

    #container {
    width: 750px;
    margin: 0 auto;
}
    0 讨论(0)
  • 夕颜
    2020-12-06 20:45

    I believe this might help you.

    0 讨论(0)
  • Happy的楠姐
    2020-12-06 20:56

    try 

    #div {
  margin:0 auto
};
    0 讨论(0)
  • 时光说笑
    2020-12-06 21:06 
    #wrapper {
    width: 800px;
    margin: 0 auto; 
 }

<div id="wrapper">
     <p>This will appear in a centered container</p>
</div>
    0 讨论(0)
 看不清?
提交回复
热议问题