• June 2, 2017

    <h1><span>The Last Will and Testament of Eric Jones</span></h1>
    And then apply the background color on the inline element.

    h1 {
        text-align: center; 
    }
    h1 span { 
        background-color: green; 
    }

    HTML

    <h1>  
    The Last Will and Testament of
    Eric Jones</h1> 
    <p>Some other text</p>
    CSS

    h1{
        display:inline;
        background-color:green;
        color:#fff;
    }

    h1 {
        display: table; /* keep the background color wrapped tight */
        margin: 0px auto 0px auto; /* keep the table centered */
        padding:5px;font-size:20px;background-color:green;color:#ffffff;
    }
    <h1>The Last Will and Testament of Eric Jones</h1>
    
    .container {
        text-align: center; /* center the child */
    }

    h1 {
        display: inline-flex; /* keep the background color wrapped tight */
        padding:5px;font-size:20px;background-color:green;color:#ffffff;
    }
    <div class="container">
      <h1>The Last Will and Testament of Eric Jones</h1>
    </div>

    .container {
      display: flex;
      justify-content: center; /* center the child */
    }
    h1 {
        display: flex;
        /* margin: 0 auto; or use auto left/right margin instead of justify-content center */
        padding:5px;font-size:20px;background-color:green;color:#ffffff;
    }
        <div class="container">
          <h1>The Last Will and Testament of Eric Jones</h1>
        </div>

    .container {
      display: flex;
      justify-content: center; /* centers child */
    }
    h1 {
        display: block;
        padding:5px;font-size:20px;background-color:green;color:#ffffff;
    }
    <div class="container">
      <h1>The Last Will and Testament of Eric Jones</h1>
    </div>

    h1 {
        display: flex; /* set a flex box */
        justify-content: center; /* so you can center the content like this */
    }
    
    h1::before {
        content:'The Last Will and Testament of Eric Jones'; /* the content */
        padding: 5px;font-size: 20px;background-color: green;color: #ffffff;
    }
    <h1></h1> Jones</h1>

    .container {
      position: relative; /* required for absolute positioned child */
    }
    h1 {
      display: inline-block; /* keeps container wrapped tight to content */
      position: absolute; /* to absolutely position element */
      top: 0;
      left: 50%; /* part1 of centering with translateX/Y */
      transform: translateX(-50%); /* part2 of centering with translateX/Y */
      white-space: nowrap; /* text lines will collapse without this */
      padding:5px;font-size:20px;background-color:green;color:#ffffff;
    }
      <h1>The Last Will and Testament of Eric Jones</h1>
    <h1>  
        <span>The Last Will and Testament of Eric Jones</span>
    </h1> 
    
    
    h1 { text-align: center; }
    h1 span { background-color: green; }

    http://stackoverflow.com/questions/14310154/how-do-i-set-background-color-of-text-only-in-css



เวอไนน์ไอคอร์ส

ประหยัดเวลากว่า 100 เท่า!






เวอไนน์เว็บไซต์⚡️
สร้างเว็บไซต์ ดูแลเว็บไซต์

Categories