Question

我正在尝试在private int AddSecurityRole(IEnumerable<Role> roles, IRoleRepository roleRep, bool recursive = false) //private int AddSecurityRole(Role role, IRoleRepository roleRep) { if (settings == null) return 0; if (!recursive) settings.Roles = new HashSet<string>(roles.Select(x => x.Name)); else settings.Roles = new HashSet<string>(settings.Roles.Union(roles.ToList().Select(x => x.Name))); var res = 0; var permissions = roles.SelectMany(x=> x.RolePermissions)?.Select(x => x.Permission);//get roles based on permissions do a linked list, kvp if (permissions != null) { if(!recursive) settings.Permissions = new HashSet<string>(permissions.Select(p => p.Name)); else settings.Permissions = new HashSet<string>(settings.Permissions.Union(permissions.Select(x=> x.Name))); /* foreach (var permission in permissions) if (settings?.Permissions.Add(permission.Name) == true) res++; */ } res = settings.Permissions.Count(); var parentIDs = roles.Where(p => p.ParentRoleId != null ).Select(x => x.ParentRoleId); if (parentIDs != null) { //get list of parent roles //var parentRoles = roleRep?.FindBy(r => r.Id == role.ParentRoleId, var parentRoles = roleRep?.GetAll(r =>parentIDs.Contains(r.Id ), y => y.RoleGroups.Select(x => x.Role.RolePermissions), z => z.RoleGroups.Select(x => x.Role.RolePermissions.Select(u => u.Permission)) ).Distinct<Role>(); //pass list in here, with identifier of concat, not new hashset. if (parentRoles != null) res += AddSecurityRole(parentRoles, roleRep, true); } return res; }内垂直对齐元素，但我被圈子困住了。红色div为100％div，包含我的代码，但垂直线未显示，而圆圈（width s或div与{{{ 1}} s）不在中间。

我的代码：

span

background image

结果如下所示：

Answer 1

使用.welcomeAreaContent .welcomeName{ font-weight: bold; font-size: 1.7em; display: flex; align-items: center; }

.welcomeArea{
    margin-top: 70px;
    max-height: 98px;
    height: 98px;
    background-color: #293847;

}

.welcomeAreaContent{
        line-height: 98px;
        color: white;
        margin-left: 5%;
    margin-right: 5%;

}
.welcomeAreaContent > span {
    display:inline-block;
}
.welcomeAreaContent .welcomeName{
    font-weight: bold;
    font-size: 1.7em;
		display: flex;
    align-items: center;
}
.verticalLine {
  border-left: thick solid #ff0000;
  content: "";
}


.circle { 
   width: 50px;
   height: 50px;
      border-radius: 50%;
    behavior: url(PIE.htc); 
   -moz-border-radius: 50px; 
   -webkit-border-radius: 50px; 
   border-radius: 50px;
   margin-left: 32px;
   display: inline-block;
}
.twittericon{
    background: url('data:image/png;base64,...') no-repeat center;
    background-color: white;
     background-size: cover;   

}

＆＃13;

<div class="welcomeArea">
	<div class="welcomeAreaContent">
		<div class="welcomeName">
			TEXT TEXT
			<span class ="circle twittericon"></span>
		</div>
		<div class="verticalLine">
		</div>
	</div>
</div>

＆＃13;

import {xComponent} from './x'
@Component({
providers : [xComponent]
})
export class xyz{
constructor(public x : xComponent){}
}

＆＃13;

这是工作How to bundle vendor scripts separately and require them as needed with Webpack?

Answer 2

更新以下css部分使用flex以获取内联和垂直居中

.welcomeAreaContent .welcomeName {
  font-weight: bold;
  font-size: 1.7em;
  display: flex; /*Add this*/      
  align-items: center; /*Add this*/
}

.welcomeArea {
  margin-top: 70px;
  max-height: 98px;
  height: 98px;
  background-color: #293847;
}

.welcomeAreaContent {
  line-height: 98px;
  color: white;
  margin-left: 5%;
  margin-right: 5%;
}

.welcomeAreaContent>span {
  display: inline-block;
}

.welcomeAreaContent .welcomeName {
  font-weight: bold;
  font-size: 1.7em;
  display: flex;
  align-items: center;
}

.verticalLine {
  border-left: thick solid #ff0000;
  content: "";
}

.circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  behavior: url(PIE.htc);
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  border-radius: 50px;
  margin-left: 32px;
  display: inline-block;
}

.twittericon {
  background: url('data:image/png;base64,...') no-repeat center;
  background-color: white;
  background-size: cover;
}

<div class="welcomeArea">
  <div class="welcomeAreaContent">
    <div class="welcomeName">
      TEXT TEXT
      <span class="circle twittericon"></span>
    </div>
    <div class="verticalLine">
    </div>
  </div>
</div>

Answer 3

有几种方法可以这样做

将margin-top用于当前div
使用padding-top到父div
使用position：relative;顶部：__ PX;到当前的div
参考std::shared_ptr

希望有所帮助

Answer 4

尝试：

.circle
{ 
    vertical-align: middle;
}

Answer 5

您可以使用vertical-align属性垂直对齐内联元素。

.twittericon {
background: url(data:image/png;base64,...) no-repeat center;
background-color: white;
background-size: cover;
vertical-align: middle;
}

否则，如果它们是块元素，则可以使用flexbox。

<ul class="parent">
<li>2</li>
<li>1</li>
</ul>
<style>
.parent { display: flex; align-items: center; }
</style>

在div内垂直对齐元素

5 个答案: