Question

我有文字，然后是一个克拉文字，但由于某些原因，尽管我付出了努力，仍然无法让插入符号与文本垂直对齐。

HTML：

<div id ="hiddensubmit" class = "dropdown-toggle" data-toggle="dropdown" onclick="document.formSearch.submit()" style="top:55px; font-size:20px;">
<a href="#" id="drop" class ="dropdownsearch">Stuff&nbsp;<span class = "searchcaret" style="display:inline;line-height:66px;vertical-align:middle;"></span></a></div>

CSS：

.dropdown-toggle {
  *margin-bottom: -3px;
}
.searchcaret {
  display: inline-block;
  width: 0;
  height: 0;
  line-height:100px;
  padding: 10px 0px 0px 0px;
  vertical-align: middle;
  border-top: 4px solid #000000;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
  content: "";
  opacity: 0.3;
  color: #5A5A5A;
  filter: alpha(opacity=30);

的位置是：绝对的;顶部：10px的; }

Answer 1

改变这个：

<a href="#" id="drop" class ="dropdownsearch">Stuff&nbsp;<span class = "searchcaret" style="display:inline;line-height:66px;vertical-align:middle;"></span></a></div>

对此：

<a href="#" id="drop" class ="dropdownsearch">Stuff&nbsp;<span class = "searchcaret"></span></a></div>

主要是display:inline做到了。

Answer 2

在插入符号范围的内联CSS中，更改：

<a href="#" id="drop" class ="dropdownsearch">Stuff&nbsp;<span class = "searchcaret" style="display:inline;line-height:66px;vertical-align:middle;"></span></a>

为：

<a href="#" id="drop" class ="dropdownsearch">Stuff&nbsp;<span class = "searchcaret" style="display:inline-block;line-height:66px;vertical-align:middle;"></span></a>

您需要更改任何垂直对齐。然后移动CSS中的填充以完全按照您的需要进行调整。

如何让插入符号与文本对齐

2 个答案: