Question

好的，所以我在垂直排列和精神崩溃的边缘战斗。我的hacky解决方案最终似乎无效，但Chrome以某种方式搞砸了基线。

这是小提琴：

这是粘贴的代码：

<div class="outer">
<div class="img"></div>
   <div class="main">

     <div style="display:flex;height:100%;align-items:center;">
       VITTUSAATANA

     </div>

   </div>
</div>

的CSS：

div.outer{

}
div.main{
  height:51px;

  display:inline-block;
  border:1px solid red;
}
div.img{
  background-image:url("https://digiluovuus.files.wordpress.com/2010/04/media_httpkotiwelhoco_cfizk-scaled5001.jpg?w=409&h=517");
  background-size:100%;
  width:41px;
  height:51px;
  display:inline-block;
}

适用于Firefox，但在Chrome上（新版本似乎已将版本号隐藏到我无法搜索的地方）。

文本应与图片的中间对齐，其父元素的中间+父元素应与图片对齐。这就是我在Firefox上看到的。

但是在Chrome上，文字的父元素会被向下拖动，以便文字与图片的底部对齐。

.img和.main需要显示：inline-block，解决方案应该只涉及触及主要元素+它的孩子。

Answer 1

我认为您的问题是将Dim xml = IO.File.ReadAllText(masterLangDir) Dim xdoc = New XmlDocument() xdoc.LoadXml(xml) Dim xPaths = findAllNodes(xdoc.SelectSingleNode("content"), New List(Of String)) public List<string> findAllNodes(XmlNode node, List<string> xPaths) { foreach (XmlNode n in node.ChildNodes) { var checkForChildNodes = true; if (n.Attributes != null) { if (n.Attributes("editable") != null) { if (n.Attributes("editable").Value == "true") { xPaths.Add(GetXPathToNode(n)); checkForChildNodes = false; } } } if (checkForChildNodes) { xPaths = findAllNodes(n, xPaths); } } return xPaths; } public string GetXPathToNode(XmlNode node) { if (node.NodeType == XmlNodeType.Attribute) { // attributes have an OwnerElement, not a ParentNode; also they have // to be matched by name, not found by position return String.Format("{0}/@{1}", GetXPathToNode(((XmlAttribute)node).OwnerElement), node.Name); } if (node.ParentNode == null) { // the only node with no parent is the root node, which has no path return ""; } // Get the Index int indexInParent = 1; XmlNode siblingNode = node.PreviousSibling; // Loop thru all Siblings while (siblingNode != null) { // Increase the Index if the Sibling has the same Name if (siblingNode.Name == node.Name) { indexInParent += 1; } siblingNode = siblingNode.PreviousSibling; } // the path to a node is the path to its parent, plus "/node()[n]", where n is its position among its siblings. return String.Format("{0}/{1}[{2}]", GetXPathToNode(node.ParentNode), node.Name, indexInParent); }与flexbox元素混合。解决方案是移除flexbox并添加inline-block。它将适用于所有浏览器：

https://jsfiddle.net/53272b1v/11/

vertical-align

修改

只需添加div.main, div.img{ vertical-align:top; }属性：

https://jsfiddle.net/53272b1v/14/

Answer 2

只需添加float：left;它也适用于Chrome ......

<div style="display:flex;height:100%;align-items:center;float:left;">VITTUSAATANA</div>

Chrome中的图片和文字对齐问题

2 个答案:

修改