Fatal编程技术网
  • html/
  • HTML图像和文本上下对齐

HTML图像和文本上下对齐

html css

HTML图像和文本上下对齐,html,css,Html,Css,我使用下面的代码来显示一个图像和一些文本，如1234。我不熟悉html和css，虽然图像部分工作正常，但我希望文本对齐以填充图像的顶部和底部，如下所示： 同样的方法，如果我添加更多的文本，然后自动对齐。。。我应该在哪里找这个 1 2 3 4 1234 完成此操作后，您只需在正在使用的编辑器中更改图片的文本对齐属性即可 您还可以创建一个表格，其中包含您的值，并在图片的左侧对齐。 1234 完成此操作后，您只需在正在使用的编辑器中更改图片的文本对齐属性即可 您还可以创建一个表，其中

我使用下面的代码来显示一个图像和一些文本，如
1234
。我不熟悉html和css，虽然图像部分工作正常，但我希望文本对齐以填充图像的顶部和底部，如下所示：

同样的方法，如果我添加更多的文本，然后自动对齐。。。我应该在哪里找这个


1 2 3 4   


1
2
3
4
完成此操作后，您只需在正在使用的编辑器中更改图片的
文本对齐
属性即可

您还可以创建一个表格，其中包含您的值，并在图片的左侧对齐。


1
2
3
4
完成此操作后，您只需在正在使用的编辑器中更改图片的
文本对齐
属性即可

您还可以创建一个表，其中包含您的值，并在图片的左侧对齐。

使用一些CSS Flex Magic

这是完全可伸缩的，无论图像大小如何，都能正常工作

#imgWrap，
#伊姆格拉普{
显示：-网络工具包盒；
显示：-ms flexbox；
显示器：flex；
}
#伊姆格拉普{
-ms-flex方向：列；
-网络工具包盒方向：垂直；
-webkit盒方向：正常；
弯曲方向：立柱；
-webkit内容：周围的空间；
-ms-flex-pack：分发；
证明内容：周围的空间；
列表样式：无；
保证金：0；
填充：0；
}


    

  • 1
    • 

  • 2
    • 

  • 3
    • 

  • 四,
    •
带有一些CSS Flex魔力

这是完全可伸缩的，无论图像大小如何，都能正常工作

#imgWrap，
#伊姆格拉普{
显示：-网络工具包盒；
显示：-ms flexbox；
显示器：flex；
}
#伊姆格拉普{
-ms-flex方向：列；
-网络工具包盒方向：垂直；
-webkit盒方向：正常；
弯曲方向：立柱；
-webkit内容：周围的空间；
-ms-flex-pack：分发；
证明内容：周围的空间；
列表样式：无；
保证金：0；
填充：0；
}


    

  • 1
    • 

  • 2
    • 

  • 3
    • 

  • 四,
    •
注意：Flex在IE9、IE8和IE7中不支持，所以我不使用它。

试试这个：

#包装器{
位置：相对位置；
溢出：隐藏；
}
#包装工：之后{
显示：块；
明确：两者皆有；
内容：''；
}
#数{
身高：100%；
位置：绝对位置；
左边距：130像素；
框大小：边框框；
}
.im{
浮动：左；
}
跨度{
显示：块；
身高：28%；
}

1.
2.
3.
4.
注意：Flex在IE9、IE8和IE7中不支持，所以我不使用它。

试试这个：

#包装器{
位置：相对位置；
溢出：隐藏；
}
#包装工：之后{
显示：块；
明确：两者皆有；
内容：''；
}
#数{
身高：100%；
位置：绝对位置；
左边距：130像素；
框大小：边框框；
}
.im{
浮动：左；
}
跨度{
显示：块；
身高：28%；
}

1.
2.
3.
4.
为了保持简单，您可以将图像设置为背景，并在图像的宽度上进行填充：

#imgHolder{
背景图像：url（'http://icons.iconarchive.com/icons/uiconstock/christmas-clipart/128/flower-icon.png');
背景重复：无重复；
高度：130像素；
左侧填充：130像素；
线高：32px；
}

1.


2.


3.


4.
为了保持简单，您可以将图像设置为背景，并在图像的宽度上进行填充：

#imgHolder{
背景图像：url（'http://icons.iconarchive.com/icons/uiconstock/christmas-clipart/128/flower-icon.png');
背景重复：无重复；
高度：130像素；
左侧填充：130像素；
线高：32px；
}

1.


2.


3.


4.
没有简单的方法可以做到这一点。您可以使用css线条高度或flex box执行类似的操作。但如果你刚刚开始学习，我会让你耐心等待，因为这是一个更高级的级别。@MosheHarush，除了：）@Obsidian，根据他所说的，这是一个“开始”级别。我不确定你是否应该改成一种被认为是相对于新的和先进的东西的弹性。没有简单的方法可以做到这一点。您可以使用css线条高度或flex box执行类似的操作。但如果你刚刚开始学习，我会让你耐心等待，因为这是一个更高级的级别。@MosheHarush，除了：）@Obsidian，根据他所说的，这是一个“开始”级别。我不确定你是否应该改成一个与新的和高级的东西相关的flex。+1但我会删除孩子们的
flex:1
，并在家长上使用
justify content:space-between
，使其与op的图像完全一样。@MichaelCoker批准并安顿。+1但我会删除孩子们的
flex:1
子项和子项使用
对齐内容：父项上的
之间的空格，使其与op的图像完全相同。@Michaelcker批准并批准。没有
文本对齐
或

这样的事情，也没有
文本对齐
或



<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>

<img src = "yourimagesource">1</br>2</br>3</br>4

</body>
</html>