想要将h2标记添加到div HTML中 [英] Want to add an h2 tag into a div HTML
本文介绍了想要将h2标记添加到div HTML中的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
所以我正在为自己建立一个投资组合，但我不能把第二个h2标签放在div的中心..
这就是最终结果应如下所示：
照片 - imgbb.com [ ^ ]
这是原始照片：
face - imgbb.com [ ^ ]
我希望有人可以提供帮助
< b>我尝试过：
/*Index.html*/
So i'm building an portfolio for myself, but I just cannot put the second h2 tag in the center of the div..
This is what the end result should look like:
Photo — imgbb.com[^]
This is the original photo:
face — imgbb.com[^]
I hope someone can help
What I have tried:
/*Index.html*/
<!DOCTYPE html>
<meta charset="UTF-8">
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet'>
<title>Debaveye Elias</title>
</head>
<body>
<div class="head">
<img src="images/face.jpg" id="face" alt="">
<h1 class="head">Debaveye Elias</h1>
<h2 class="head" >A C# software developer</h2>
</div>
</body>
</html>
/*Style.css*/
/*Style.css*/
@import url(https://fonts.googleapis.com/css?family=Raleway);
div.head img#face {
width: 450px;
height: 450px;
}
div.head {
background: rgba(187, 200, 133, 1);
margin: auto;
display: block;
margin-left: auto;
margin-right: auto;
position: center;
width: 1088px;
height: 450px;
}
div.head h1{
display: inline-block;
font-family: Raleway;
color: #FFF;
font-size: 70px;
overflow: hidden;
padding-left: 65px;
padding-bottom: 187px;
font-weight: lighter;
}
div.head h2 {
display: inline-block;
margin-top: 0px;
font-family: Raleway;
color: #000;
font-size: 50px;
font-weight: lighter;
}
推荐答案
我建议使用Bootstrap网格系统，添加一行和两列，然后在第二列上使用my-auto类根据第一列上的图像高度自动调整其高度。一些好处是页面应该在大多数浏览器中正确显示，内容根据浏览器宽度/分辨率自动调整以适应。这里是演示 cp demo [ ^ ]，这里是沙箱：静态 - CodeSandbox [ ^ ]
参考
网格系统·引导程序 [ ^ ]
I would suggest to useBootstrap Grid system, add one row and two columns, then usemy-autoclass on the second column to auto adjust its height based on the image height on first column. Some benefits are the page should display correctly in most browser and the content auto adjust to fit based on browser width/resolution. here is the demo cp demo[^], here the sandbox: static - CodeSandbox[^]
Reference
Grid system · Bootstrap[^]
如果你不想要要使用Bootstrap，您可以直接使用Flexbox：
A Complete Flexbox指南| CSS-Tricks [ ^ ]
If you don't want to use Bootstrap, you can just use Flexbox directly:
A Complete Guide to Flexbox | CSS-Tricks[^]
<article class="head">
<img src="https://i.ibb.co/WGszpH9/face.jpg" id="face" alt="" />
<header>
<h1>Debaveye Elias</h1>
<h2>A C# software developer</h2>
</header>
</article>
@import url(https://fonts.googleapis.com/css?family=Raleway);
.head {
font-family: Raleway;
background: rgba(187, 200, 133, 1);
margin: auto;
display: flex;
align-items: center;
}
.head > img {
width: 30%;
margin-right: 20px;
}
.head h1 {
color: #FFF;
font-size: 70px;
font-weight: lighter;
margin: .2em 0;
}
.head h2 {
color: #000;
font-size: 50px;
font-weight: lighter;
margin: .2em 0;
}
这篇关于想要将h2标记添加到div HTML中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
