Question

我想在右下角的这个页面上放置另一个图像，左边是文字。左上方已有一个图像，右侧有文字。此外，文本是否可以与图像垂直居中？我知道这看起来很草率，但这是我第一次编写网站。

这是我的代码：

<!DOCTYPE html>    
<html>   
<style>
  h1{
       color:white;
       font-size: 50px;
       font-family: ultra;
    }

    p{
    color:white;
    }

    h2{
    color:white;
    }

    body {
        font-family: "Lato", sans-serif;
    }
    .sidenav {
        height: 100%;
        width: 250px;
        position: fixed;
        z-index: 1;
        top: 0;
        left: 0;
        background-color: red;
        overflow-x: hidden;
        padding-top: 60px;
    }

    .sidenav a {
        padding: 8px 8px 8px 32px;
        text-decoration: none;
        font-size: 25px;
        color: black;
        display: block;
    }

    .sidenav a:hover {
        color: #818181;
   }

    .main {
        margin-left: 250px; 
        font-size: 28px; 
    }

@media screen and (max-height: 450px) {
    .sidenav {padding-top: 15px;}
    .sidenav a {font-size: 18px;}
}
body {  
    background-color:#252525;
    background-attachment:fixed;
    background-position: 50% 50%;
    background-repeat:no-repeat;
    margin: 0;
}
.header {
    background-color: #252525;
    padding: 10px;
    margin-left: 250px;
    text-align: center;
}
.rcorners1 {
    margin: auto;
    border-radius: 25px;
    background: #73AD21;
    padding: 20px;
    width: 90%;
    height: 1000px;
    }

    .main img {
      float: right;
      margin-left: 10px;
      vertical-align: top;
    }
    .main img{
    float:left;
        margin-right:10px;
    }
    .clear {
      clear: both;
    }
</style>
<body>
<div class="sidenav">
<a href="home.html">Home</a>
<a href="about.html">About</a>
<a href="Why Us.html">Why Us?</a>
<a href="Meet The Team.html">Meet The Team</a>
<a href="Gear.html">Gear</a>
<a href="Services.html">Services</a>
<a href="Products.html">Products</a>
<a href="Satisfied Customers.html">Reviews</a>
<a href="Location.html">Location</a>
<a href="Contact Us.html">Contact Us</a>
</div>
<div class="header">
  <h1>GEAR</h1>
</div>
<div align="center">
<div class="main">
    <div class="rcorners1" style="background-color: #fffafa;" "text-align:right;"> 
    <img src="Our Gadgets.jpg" class="expand" width="40%" height="50%" alt=""/> 
    <div class="text">The proton pack, designed by Dr. Egon Spengler, is a man-portable particle accelerator system that is used to create a charged particle beam composed of protons that is fired by the proton gun (also referred to as the "neutrona wand"). Described as a "positron collider", it functions by colliding high-energy positrons to generate its proton beam. The beam allows a Ghostbuster to contain and hold "negatively charged ectoplasmic entities". This containment ability allows the wielder to position a ghost above a trap for capture.</div>
    <img style="float: right;" src=" class="expand" width="40%" height="50%" alt=""/>
    <div class="text"></div>
    <div class="clear"></div>
  </div>
</body>
</html>

Answer 1

我摆弄了你的代码，这就是我认为你想要完成的事情。 https://codepen.io/carmona-joel/pen/geNJmM

您需要为每个图像定义一个类。

img.img-1{
  float:left;
}
img.img-2{
  float:right;
}

或者您可以内联定义。

是的，您可以将图像和文本居中。

使用

margin:0 auto;
/*for the img*/

和

text-align:center;
/*for text*/

Answer 2

这比你想象的更容易解决。要在一行中包含多个元素，建议您使用display: inline;或display: inline-block;。通常，您将拥有display: block;的元素。当它是一个块时，它会为大多数元素提供一个新行，因此每行只有一行。有许多例外情况令人惊讶。此外，并非所有元素都是块。例如，<span>元素对文档没有样式效果，除非您提供id，name，class或使用javascript来设置样式。但回到你的问题，这就是我想出来的。

#im1 {
float: left;
display: inline;
margin: 0px;
}

#text1 {
float: right;
margin: 0px;
display: inline;
}

#im2 {
float: right;
margin: 0px;
display: inline;
}

#text2 {
float: left;
margin: 0px;
display: inline;
}

<!DOCTYPE html>
<html>
<head>
<!-- Here is where you would link your css to your document, or you could just use <style> but it is much easier to use a seperate document. You can find tutorials on w3schools on how to do this easily-->

<title>title</title>
</head>
<body>

<img id="img1" width="25%" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">

<span id="text1">Oh, here is the text I was speaking of</span>
<br><br>
<img id="img2" width="25%" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
<span id="text2">Is this more text?</span>


</body>
</html>

这里发生的是我将边距设为0像素。这是过度的，并不是必要的，因为我们将它们作为内联元素，但我喜欢将它包括在内:)。边距是元素周围的空间量。我也让元素向左或向右浮动。使用float时只有左右方向。它所做的就是尽可能地将它推向那个方向，而不会中断其他元素。除非它们处于不同的级别，这可以通过z-indexing完成（请查看w3schools）。

不要担心这是你第一次，在某些时候每个人都是初学者。继续前进并不断学习，除了要学习的网站之外，还有很多东西。

需要帮助将图像放在方框DIV的左下角

2 个答案: