html - 在 HTML 中对齐图像-6ren

html - 在 HTML 中对齐图像

转载作者：太空宇宙更新时间：2023-11-04 13:41:55

25

4

我正在为我的 HTML 类(class)开发一个网站，遇到了一个小问题。我使用标签将我的页面分成几个部分，每个部分都有不同的类。如果可能的话，我希望将我包含在列表右侧的框中创建的图像。

这是我到目前为止的所有建议，将不胜感激。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> 

    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
            <title>Halo Multiplayer Maps By Title</title>
    <link type="text/css" rel="stylesheet" href="my_halo_style.css" />
    </head>

    <body>
    <h1>Halo Multiplayer Maps by Title</h1>
    <p>
    There are so many different maps across the many Halo titles that it can even be difficult for the most devoted fans to keep track of which maps appear on each game.
    Below, I have compiled a list of each Halo title with its corresponding maps. 
    </p>
    <h2>Take Note:</h2>
    <p>
    Several of the later titles had numerous other multiplayer maps added through different map packs. 
    These extra maps are not included in the list below, but can be found by clicking the links to each title's informatino page.
    <img src="halo.jpg" title="Halo Logo" alt="Halo Logo" align="middle">
    </p>

    <div id="halo1">
    <h1>Halo:Combat Evolved</h1>
    <p>
    <ul>
        <li>Battle Creek</li>
        <li>Blood Gulch</li>
        <li>Boarding Action</li>
        <li>Chill Out</li>
        <li>Chiron TL-34</li>
        <li>Damnation</li>
        <li>Derelict</li>
        <li>Hang 'em High</li>
        <li>Longest</li>
        <li>Prisoner</li>
        <li>Rat Race</li>   
        <li>Sidewinder</li>
        <li>Wizard</li>
    </ul>
    <img src="Halo_Combat_Evolved.jpg" title="Halo:Combat Evolved" alt="Halo:Combat Evolved Cover" align="right" />
    </p>
    </body>
</html>

不知道它是否真的需要，但这是我在类设计中使用的外部样式表。

body 
            {
            background-color: black;
            color: blue;
            text-align: left;
            margin-left: 15%;
            margin-right: 15%;
            border: 10px double blue;
            padding: 20px 25px 20px 25px;
            font-family: sans-serif;
            }

#halo1 {background-color: black;
    color: green; 
    border: 5px outset green;
    padding: 10px;
    margin: 50px;
    width: 600px;
    text-align: left; }

 #halo2 {background-color: red;
    color: orange;
    border: 5px outset orange;
    padding: 10px;
    margin: 50px; 
    width: 400px;
    text-align: left; }

#halo3 {background-color: orange;
    color: black;
    border: 5px outset black
    padding: 10px;
    margin: 50px;
    width: 400px;
    text-align: left; }

#halowars {background-color: blue;
        color: white;
        border: 5px outset white;
        padding: 10px;
        margin: 50px;
        width: 400px;
        text-align: left; }

#haloreach {background-color: black;
        color: silver;
        border: 5px outset silver;
        padding: 10px;
        margin: 50px;
        width: 400px;
        text-align: left; } 

#halo1a {background-color: silver;
            color: black;
            border: 5px outset black;
            padding: 10px;
            margin: 50px;
            width: 400px;
            text-align: left; }

#halo4 {background-color: black;
        color: blue;
        border: 5px outset blue;
        padding: 10px;
        margin: 50px; 
        width: 400px;
        text-align: left; }

最佳答案

您需要为您的图像换行，以在新行和右侧开始。以下代码将更新此网页中的所有图像以右对齐。

img {
float: right;
clear: both;
display: block;
}

#halo1 {background-color: black;
color: green; 
border: 5px outset green;
padding: 10px;
margin: 50px;
width: 600px;
text-align: left;
height: auto;
float: left; /* so it will wrap the images */
}

对于您的 HTML，您可以更新为以下内容:

<p>
Several of the later titles had numerous other multiplayer maps added through different map packs. 
These extra maps are not included in the list below, but can be found by clicking the links to each title's informatino page. 
<br><img src="halo.jpg" title="Halo Logo" alt="Halo Logo" align="middle">
</p>

Dabblet demo here.

关于html - 在 HTML 中对齐图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22677633/

25

4

0

文章推荐： javascript - 需要关于过滤器图标编码的建议

文章推荐： c++ - 如何在 MFC 图片控件的设计时显示图片？

文章推荐： c++ - 从大尺寸的 .csv 文件转换为二维数组

文章推荐： java - 从 BaseAdapter 访问 Activity 的变量

html - 对齐/对齐 li 网格元素
我希望能够像在 jsFiddle 中那样将元素列表对齐到右侧的复选框。这是如何做到这一点的最佳实践？传统上我从来没有 float 过相互嵌套的元素，所以我想确定这是否是解决此问题的正确方法。代码(h
assembly - MIPS assembly 对齐对齐 n
指令.align n是什么意思在数组中做什么？更具体地说，假设我有以下部分代码: array: .align 2 .space 800 它的重要性是什么，为什么不跳过它并使用
c - 强制 2 函数对齐的幂 s.t 对齐 % 一些其他值 == 对齐
基本上我正在寻找一种强制特定相对对齐的方法即我想保证其他一些值(value) m s.t m > n alignment_of(foo) % 2^m == 2^n IE: .align 2^m; .
多维数组结构的C++对齐
在我的代码中，我必须考虑一个数组数组，其中内部数组具有固定维度。为了使用 STL 算法，将数据实际存储为数组的数组很有用，但我还需要将该数据传递给 C 库，该库采用扁平化的 C 样式数组。如果能够以
BlackBerry HorizontalFieldManager 对齐
横向上，我想显示两个位图，并在它们之间显示一个标签字段。代码看起来很简单，但所有字段都添加在屏幕左侧。 HorizontalFieldManager hfm = new HorizontalFiel
轴标签与表达式的 R 对齐
我想绘制一个变量名称及其符号。因为某些变量的名称很长，所以我试图将换行符与轴标签混合使用。这会导致对齐中发生有趣的事情: par(mar=c(1,12,1,1)) plot( y=1:6, 1:6,
r - 将左两行图例标题与expression()对齐
使用这个脚本 df <- data.frame(x = 1:5, y = 1:5, color = letters[1:5]) ggplot(df, aes(x, y, fill = color))
matlab - 在matlab中从结构创建表 - 对齐
我有一个带有标量字段的结构，比如妈妈，我想在屏幕上对齐的列中显示结构的值，可能还有一些标题。这是一个最小的工作示例: mom.a = 1; mom.b = 2; mom.veryLongName =
ios 自动布局视觉格式 - 对齐
在 iOS6 中，我使用自动布局。我有 2 个以编程方式创建的 View v1 和 v2。 v2 作为 subview 添加到 v1 v1 的约束已通过编程方式创建(此处未显示)。我希望 v1 和
C++ 对齐 new[]
概述浏览时operator new, operator new[] - cppreference.com ，似乎我们有许多选项来分配具有特定对齐要求的对象数组。但是，没有指定如何使用它们，而且我似乎
flutter - 对两个文本小部件仅使用一次“对齐”
Widget _createProfileContainer() { return new Container( height: 64.0, child: ne
javascript - Bootstrap 对齐
我正在使用 Bootstrap 和语义 UI 的组合来设计和对齐我的网页。目前，我在将页面 api map 和博客文章在整个页面上对齐时遇到问题，而不是像图像所示那样堆叠在一起。这是我的底层代码，
Java GUI 对齐
所以我已经添加了标签和所有内容，但我仍然在格式化和对齐所有内容时遇到问题。计算按钮显然应该居中。我知道使用 gridbag 将框架分割成坐标系，当一列大于其他列时，它会调整其他列并将其抛弃(对吗？)。
java - 对齐 JButton
我必须将程序上的按钮对齐到中间，我运行的当前代码但显示的按钮与程序一样大，我想要一个特定大小的中心按钮，这是我尝试过的 /** * Created by Timk9 on 11/04/2016.
VIM 格式化/对齐
我正在尝试将 VIM 作为我的 ruby/rails 编辑器。太胖了，我对它的功能印象深刻并且我能够安装以下插件以提供更好的 IDE 体验自动配对 Better-snipmate-snippe
c++ - 对齐/偏移结构的特定成员
在结构内对齐成员的最佳或常规方法是什么？添加虚拟数组是最佳解决方案吗？我有一个 double 的结构和 double 的三倍是吗？ struct particle{ double mass;
C++ iomanip 对齐
我正在尝试对齐我的输出，但由于某种原因我无法做到我多么想要它，这真的很令人沮丧。标题不会正确对齐。我不知道我是否正确使用了 setw()。 #include using std::cout; usi
android - 对齐 TextView
我正在开发一个 android 应用程序，其相对布局如下所示。这是应用程序在屏幕上的显示方式的 imgur 链接:http://imgur.com/c4rNJ .我希望“Text 1”出现在“a l
java - 对齐 JButton
我不确定为什么我不能在下面的代码中调整按钮的位置。我有几行设置了边界，但我一定遗漏了一些东西。 public DayGUI() { mainFrame = new JF
html - 对齐 iframe
我有一个 html 页面，我想在页面底部对齐一个 iframe，使 iframe 占据所有宽度，我无法在底部对齐 iframe。请找到底部的 iframe 标签页面。 The rest of th

首页

博学

6Ren·AI

商城

html - 在 HTML 中对齐图像