Question

我正在一个网站上工作，想看看我如何垂直居中h2和相对于包含图像的div的子标题。

基本上，我有一个包含display: flex和flex-direction: column的容器。我有三列。

第一列包含配置文件图像以及标题和子标题。垂直居中.title div的最佳方法是什么？

的链接

Answer 1

将display: flex提交给班级profile-container，然后您可以将其子级个人资料图片和标题类对齐到垂直中心，如下所示：

.profile-container{
 display : flex;
 align-items : center;
 height : 200px; //provide wrapper height
}

这应该达到你的要求。

Answer 2

尝试使用绝对定位，使用-50％变换。

＆＃13;

void ProgressListener( std::string progURL, double &progress ){
  web::http::experimental::listener::http_listener progListener(hostURL);
  progListener.support(web::http::methods::GET, [&](web::http::http_request request){
    web::http::http_response response;
    response.set_status_code(web::http::status_codes::OK);
    response.headers().add("Progress", progress); // You can call the header anything pretty much
    request.reply(response);
  }
}

＆＃13;

@import url('https://fonts.googleapis.com/css?family=Lato');
html {
  width: 100%;
  height: 100%;
}

body {
  background-color: #fafafa;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.container {
  background: white;
  width: 1000px;
  height: 600px;
  border: 1px solid rgba(0, 0, 0, .09);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .04);
  display: flex;
  flex-direction: column;
}


/*set up vertical column layouts for the three containers*/

.profile-container,
.work-container,
.social-media-container {
  flex: 1;
  padding: 1.5rem;
}

.profile-container {
  align-self: center;
  position: relative;
  width: 100%;
}

.profile-image {
  display: inline-block;
  background-image: url('https://organicthemes.com/demo/profile/files/2012/12/profile_img.png');
  background-repeat: no-repeat;
  background-position: 0px 0px;
  background-size: 100%;
  height: 200px;
  width: 200px;
  border-radius: 50%;
}

.title {
  display: inline-block;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  padding-left: 25px;
}

.header-name {
  font-family: 'Lato', sans-serif;
  display: inline-block;
  margin: 0px;
}

＆＃13;

参考链接：https://jsfiddle.net/kzj4omo8/3/

垂直居中h2和子标题

2 个答案: