Simple center a object with css and no hacks

前端 未结 7 822
不思量自难忘°
不思量自难忘° 2021-02-01 05:13

I want to center an object using CSS and no hacks, is this possible and how?

I have tried this, but than my p tag is gone.

.centered {
  position: fixed;         


        
相关标签:
7条回答
  • 2021-02-01 05:24

    if you don't need to be position:fixed; you can just use

    <center>
    Hello
    </center>
    

    This is deprecated in HTML5

    0 讨论(0)
  • 2021-02-01 05:33

    There's several ways to center an element. But it depends on what your element is and how we choose to display it:

    • If you have {display:inline; }

      This is simple. You can just use "text-align: center;" to center text, images and divs.

    • If you have {display:block;}

      This is a bit more difficult. It depends on how your object is positioned. Your object could be relative, absolute, or fixed.

      • If it is relative; then you can use "margin:0 auto;", however you will require a width value.

      • If it is absolutely positioned, then you need to specify your "top:" and "left:" values. You'll also need a width. If you know the width of the element, the best way is to use {left:50%; margin-left:-X}, where X = 1/2 the width of the element.

    0 讨论(0)
  • 2021-02-01 05:33

    Use margin: auto like this:

    margin: 0px auto
    
    0 讨论(0)
  • 2021-02-01 05:40

    Use this for general purposes. Even span or div which is inside whatever :

    width:inherit; display:block;margin:0 auto;
    
    0 讨论(0)
  • 2021-02-01 05:42

    Usage :

    1. In-Line usage : Content goes here....
    2. CSS Code :

      #text-align { text-align:center }

    HTML Code :

    <div id="text-align">Content goes here....</div>

    http://www.techulator.com/resources/4299-center-Deprecated-tags-HTML.aspx

    0 讨论(0)
  • 2021-02-01 05:45

    HTML:

    <div>Centered</div>
    

    CSS:

    div {
        margin: 0 auto;
        width: 200px;
    }
    

    Live example: http://jsfiddle.net/v3WL5/

    Note that margin: 0 auto; will only have an effect if the div has a width.

    0 讨论(0)
提交回复
热议问题