Question

基本上，我正在尝试设置如下所示的内容：

enter image description here

但是，由于某些原因，我的代码无效。所有的拳头，在tinkerbin，我的箭头图像甚至没有显示。它在我的电脑上工作正常，所以我不确定为什么会这样。我也试过jsfiddle，它也没有在那里工作。

我可以让箭头在那里很好，但是我不能让文本垂直居中，更不用说在图像存在的时候就把灰色框放进去了。这就是让我困惑的地方。

HTML：

<div id="answers">
  <div id="arrowcenter"></div><div id="answerstext">Text Next To Arrow</div>

</div><!-- end grayAnswer -->

CSS：

#answers {
width:220px;
height:50px;
background-color:#DDDDDD;
border-top:1px solid black;
border-bottom:1px solid black;
margin-top:20px;
 }

#arrowcenter {
width:71px;
height:31px;
background-image:url('http://fortmovies.com/brazil/arrow.png');
background-position:0 50%;
background-repeat:no-repeat;
height:100%;
margin-left:-140px; } 

#answerstext {
margin-top:0;
 }

Answer 1

您的所有箭头中的第1个未显示，因为您在margin-left:140px;中使用了#arrow_center

查看我的Fiddle

只需1 <div> Fiddle

Answer 2

这个答案的灵感来自Alien先生answer使用较少标记（id可选）。

参考：jsFiddle

HTML：

<span>Masculino</span>

CSS：

span {
    background-image:url('http://fortmovies.com/brazil/arrow.png');  /*  70px x 31px   */
    background-position: 3px 10px;
    background-repeat: no-repeat;
    background-color: #DDDDDD;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    font-family: Arial;
    font-weight: bold;
    font-size: 30px;
    padding: 8px 10px 8px 80px;
}

状态更新：jsFiddle with Div for Navbar method

Answer 3

只需删除margin-left:-140px;并将float:left;添加到#arrowcenter

即可

<强> Working Demo

Answer 4

margin-left:-140px;移动#arrowcenter屏幕外删除它的目的是什么，你会没事的。

同时将两个div设置为display:inline-block并垂直对齐

#arrowcenter {
    ...
    display:inline-block; 
    vertical-align:middle;
} 
#answerstext {
    ...
    display:inline-block; 
   vertical-align:middle;
}

http://jsfiddle.net/XEk5d/

Answer 5

使用标记代替标记。

标签默认显示：block，这可以防止不同s的内容彼此相邻。标签默认显示：内联;更适合您的想法。作为替代，你也可以在你的CSS中设置这些显示规则。

Answer 6

#answers {
width:220px;
height:50px;
background-color:#DDDDDD;
border-top:1px solid black;
border-bottom:1px solid black;
margin-top:20px;
}

#arrowcenter {
width:75px;
height:31px;
background-image:url('http://fortmovies.com/brazil/arrow.png');
background-position:0 50%;
background-repeat:no-repeat;
height:100%;
float: left;
} 
#answerstext {
margin-top: 16px;
}

Answer 7

    Little bit changes that i made in just in your css as follow, and it is working...

#answers {
width:220px;
height:50px;
background-color:#DDDDDD;
border-top:1px solid black;
border-bottom:1px solid black;
margin-top:20px;
 }

#arrowcenter {
width:120px;
height:31px; float:left;
background-image:url('http://fortmovies.com/brazil/arrow.png');

background-position:0 50%;
background-repeat:no-repeat;
height:100%;
 } 

#answerstext {
margin-top:0; float:left; height:50px; line-height:50px;
 }

Answer 8

的 Working Demo 的

OR

使用此CSS

#answers { width: 220px; height: 50px; background-color: #DDDDDD; border-top: 1px solid black; border-bottom: 1px solid black; margin-top: 20px; } #arrowcenter { width: 100px; height: 50px; background-image: url('http://fortmovies.com/brazil/arrow.png'); background-position: left center; background-repeat: no-repeat; float:left; } #answerstext { line-height:50px; margin-left:10px; font-size:20px; font-family:Arial; font-weight:bolder; }

在HTML中使用： -

<div id="answers"> <div id="arrowcenter"> &nbsp</div> <div id="answerstext"> Masculino</div> </div>

我希望它会有所帮助!! ：）

为什么这个文字不在这个盒子里面？

8 个答案: