Question

我无法弄清楚如何在同一条线上的骑士之后出现标题和副标题。有帮助吗？我也试过了div和table。它只是拒绝彼此相邻并居中。

完整代码

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>University Chess Club</title>

</head>
<style>
body {
    background-image: url("ChessBackground.jpg");
    background-repeat: no-repeat;
    background-size : cover;
}
h1{
/*margin-left:23%;*/
font-size:350%;
color: #f2f0ea;/* --off- yellow-white-- */
margin-bottom:5px;
font-family: 'Voltaire', sans-serif;
}

h2{
margin-left:35%;
width:50%;
margin-top:0%;
color: #f2f0ea;/* --off- yellow-white-- */
font-family: 'Voltaire', sans-serif;
}

.group:before,
.group:after {
overflow: auto;
  content: "";
  display: table;
}
.group:after {
overflow: auto;
  clear: both;
}
.group {
overflow: auto;
  *zoom: 1;
}
.box-set {
  overflow: auto;
}
</style>

<body>
<div class="box-set">
  <figure class="box"><img src="header.png" alt="Header" height=35% width=35%></figure>
<figure class="box"><h1>University Chess Club</h1><h2>At The University Of Utah</h2></figure>
</div>

</body>

</html>

Answer 1

我做了一个例子，也许可以帮助你一点：Codepen: Image and text side by side and centered

＆＃13;

<div class="holder">
  <div class="box-set">
    <div class="box-set__knight"><img class="box-set__knight-image" src="http://cliparts.co/cliparts/rij/G8e/rijG8eeBT.png" alt="knight icon" /></div>
    <div class="box-set__header">
      <h1>University Chess Club
        <span>University Chess Club</span>
      </h1>
    </div>
  </div>
</div>

＆＃13;

length()

＆＃13;

Answer 2

使用定位

<img src="http://www.willmaster.com/images/wmlogo_icon.gif" 
   style="position:relative; left:100px; top:100px; width:50px; height:50px; border:none;"
   alt="fixed position Willmaster logo"
   title="Willmaster logo in fixed position" />
<span 
   style="position:relative; left:150px; top:75px; width:50px; height:50px; border:none;">

TEXT HERE

图像和文字并排并居中？

2 个答案: