Question

我试图将图片顶部的文字居中，但似乎无论我做什么都不会让它居中“

我也尝试使用margin 0 auto，但这也没有帮助。

＆＃13;

else {
    var excludes = typeof selector == 'string' ? this.filter(selector) :
        (likeArray(selector) && isFunction(selector.item)) ? slice.call(selector) : $(selector)

    this.forEach(function(el){
        if (excludes.indexOf(el) < 0) nodes.push(el)
    })
}

＆＃13;

    #search_box {
    	width: 100%;
    	height: 450px;
    	position: relative;
    	text-align: center;
    }
    
    #search_box h1 { 
    	display: inline-block;
    	width: 50%;
    	top: 180px;  
    	color: white;
    	background-color: red;
    	position: absolute; 
    }

＆＃13;

Answer 1

像这样？

#search_box {
    width: 100%;
    height: 450px;
    position: relative;
    text-align: center;
}

#search_box h1 { 
    display: block;
    width: 50%;
    top: 180px;  
    color: white;
    background-color: red;
  margin: auto;


}

<div id="search_box">
            <h1>SOME TEXT</h1>
            <img src="images/background_search.jpg" alt="search_box_picture"/>
            
        </div>

Answer 2

你想要这样的东西： -

.image {
   position:relative;
   text-align:center;
  
}

.text {
    left: 0;
    position:absolute;
    top: 30px;
    width: 100%;
  
}

<div class="image">
    <img src="http://davidrhysthomas.co.uk/img/dexter.png" />
    <div class="text">
       Text of variable length
    </div>
</div>

Answer 3

＆＃13;

#search_box {
    	width: 100%;
    	height: 450px;
    	position: relative;
    	text-align: center;
    }
    
    #search_box h1 { 
    	display: inline-block;
    	width: 50%;
    	top: 180px;  
    	color: white;
    	background-color: red;
    	position: absolute; 
        left:0; 
        right:0;
      margin:0 auto;
    }

＆＃13;

<div id="search_box">
    			<img src="images/background_search.jpg" alt="search_box_picture"/>
    			<h1>SOME TEXT</h1>
    		</div>

＆＃13;

根据父级div，您的图像位置是中心。 H1标签不是中心对齐的。你必须给绝对标签留出空间。

＆＃13;

#search_box {
    	width: 100%;
    	height: 450px;
    	position: relative;
    	text-align: center;
    }
    
    #search_box h1 { 
    	display: inline-block;
    	width: 50%;
    	top: 180px;  
    	color: white;
    	background-color: red;
    	position: absolute; 
        left:25%;
    }

＆＃13;

<div id="search_box">
    			<img src="images/background_search.jpg" alt="search_box_picture"/>
    			<h1>SOME TEXT</h1>
    	</div>

＆＃13;

Answer 4

＆＃13;

    #search_box {
    	width: 100%;
    	height: 450px;
    	position: relative;
    	text-align: center;
    }
    
    #search_box h1 {
display: block;
margin: 0 auto;
width: 50%;
color: white;
background-color: red;
   
}

＆＃13;

<div id="search_box">
    			<img src="images/background_search.jpg" alt="search_box_picture"/>
    			<h1>SOME TEXT</h1>
    		</div>

＆＃13;

＆＃13; 你想要这样的东西吗？

HTML居中内联块

4 个答案: