实现文字左对齐和图片右对齐的方法

最新推荐文章于 2024-05-21 16:06:28 发布
最新推荐文章于 2024-05-21 16:06:28 发布
阅读量2.7k 收藏 3
点赞数 4
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Xxxxxl17/article/details/107183849
版权

1.把图片设置为同一个div的背景图片，background: url(casio.bmp)no-repeat right center;表示背景图片不重复，靠右居中。

CSS：

			#logo{
				background: url(casio.bmp)no-repeat right center;text-align:right;
			}
			p {
				text-align: left;
			}

 html：

			<div id="logo">
					<p>EL-243S</p>
			</div>

页面展示：

 

源码：

<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>div与表格应用实例——计算器布局</title>
		<style type="text/css">
			#wrap {
				width: 410px;
				height: 450px;
				background-color: rgb(230, 230, 130);
				z-index: 0;

			}

			#logo {
				width: 390px;
				height: 40px;
				left: 20px;
				top: 5px;
				z-index: 1;
				position: absolute;
			}

			#op {
				height: 250px;
				width: 390px;
				z-index: 1;
				position: absolute;
				top: 50px;
				left: 17px;
			}

			#result {
				height: 60px;
				width: 390px;
				border: solid 1px;
				z-index: 1;
				position: absolute;
				top: 380px;
				left: 17px;
				background-color: white;
			}

			td {
				border: solid 1px black;
				width: 58px;
				height: 40px;
				margin: 10px;
				/*margin表示边距*/
				cursor: pointer;
				/*设置鼠标指针变成手的形状*/
			}

			#left {
				float: left;
			}

			#right {
				float: right;
			}
		</style>
	</head>
	<body>
		<div id="wrap">
			<div id="logo">
				<div id="left">
					<p align="left">EL-243S</p>
				</div>
				<div id="right">
					<img src="casio.bmp" />
				</div>
			</div>
			<div id="op">
				<table cellspacing="30" border="1">
					<tr align="center">
						<td>1</td>
						<td>2</td>
						<td>3</td>
						<td>+</td>
					</tr>
					<tr align="center">
						<td>4</td>
						<td>5</td>
						<td>6</td>
						<td>-</td>
					</tr>
					<tr align="center">
						<td>7</td>
						<td>8</td>
						<td>9</td>
						<td>*</td>
					</tr>
					<tr align="center">
						<td>0</td>
						<td>=</td>
						<td>CE</td>
						<td>/</td>
					</tr>
				</table>
			</div>
			<div id="result"></div>
		</div>
	</body>
</html>

2.分别设置左浮动、右浮动

CSS：

			#left {
				float: left;
			}

			#right {
				float: right;
			}

html：

				<div id="left">
					<p align="left">EL-243S</p>
				</div>
				<div id="right">
					<img src="casio.bmp" />
				</div>

源码：

 

<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>div与表格应用实例——计算器布局</title>
		<style type="text/css">
			#wrap {
				width: 410px;
				height: 450px;
				background-color: rgb(230, 230, 130);
				z-index: 0;

			}

			#logo {
				width: 390px;
				height: 40px;
				left: 20px;
				top: 5px;
				z-index: 1;
				position: absolute;
			}

			#op {
				height: 250px;
				width: 390px;
				z-index: 1;
				position: absolute;
				top: 50px;
				left: 17px;
			}

			#result {
				height: 60px;
				width: 390px;
				border: solid 1px;
				z-index: 1;
				position: absolute;
				top: 380px;
				left: 17px;
				background-color: white;
			}

			td {
				border: solid 1px black;
				width: 58px;
				height: 40px;
				margin: 10px;
				/*margin表示边距*/
				cursor: pointer;
				/*设置鼠标指针变成手的形状*/
			}
			
			#logo{
				background: url(casio.bmp)no-repeat right center;text-align:right;
			}
			p {
				text-align: left;
			}

		</style>
	</head>
	<body>
		<div id="wrap">
			<div id="logo">
					<p>EL-243S</p>
			</div>
			<div id="op">
				<table cellspacing="30" border="1">
					<tr align="center">
						<td>1</td>
						<td>2</td>
						<td>3</td>
						<td>+</td>
					</tr>
					<tr align="center">
						<td>4</td>
						<td>5</td>
						<td>6</td>
						<td>-</td>
					</tr>
					<tr align="center">
						<td>7</td>
						<td>8</td>
						<td>9</td>
						<td>*</td>
					</tr>
					<tr align="center">
						<td>0</td>
						<td>=</td>
						<td>CE</td>
						<td>/</td>
					</tr>
				</table>
			</div>
			<div id="result"></div>
		</div>
	</body>
</html>

 

Xxxxxl17
关注
  • 4
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端实现图片在左，文字在右的效果
weixin_30518397的博客
03-13 9212
废话不多说，先看效果图： ok，如果你也要实现上面的效果，可以接着往下看了。 1、首先是思路，表头部分采用bootstrap的panel样式来实现，正文部分采用的是table来实现。所有涉及到的标签我通过下面的一张图片来作详细解释： 2、如果你没有看懂，不要着急，因为我会双手送上所有代码，自己运行一下就懂了。( ･´ω`...
Qt学习笔记9：控件的对齐方式（靠左对齐、靠右对齐、居中对齐、垂直靠上对齐）
Leo的博客
09-04 3万+
Qt组件的集中对齐方式 Qt::AlignLeft //水平方向靠左。 Qt::AlignRight //水平方向靠右。 Qt::AlignHCenter //水平方向居中。 Qt::AlignTop //垂直方向靠上。 设置方法 ui.widget->layout()->setAlignment(Qt::AlignLeft); AlignLeft 水平靠左 AlignRight 水平靠右 AlignTop 垂直靠上 ...
CSS text-align图片文字内容居左 居右 居中
u012693479的博客
08-22 3623
1、text-align的值与说明 text-align语法： text-align : left | right | center | justifytext-align参数值与说明：left: 左对齐right: 右对齐center: 居中 *justify : 两端对齐（不推荐使用，通常大部分浏览器不使用） 我们对text-align常用的参数值为left、right、cente...
Typora图片左对齐
最新发布
CWL_YL的博客
05-21 512
使用Typora写笔记的时候，插入图片左对齐。
实现标签名右对齐，文本框左对齐
weixin_33943836的博客
03-17 1132
就是这个样子。 首先在原有的div内再用一个固定宽度的div把内容包起来，这个div使用相对定位，然后给所有要右对齐的文字加上<label>标签，给所有的<label>标签加上同一个类，属性为绝对定位，left属性的值根据需要来确定，这里需要用百分比来定位，然后标签的右边文本框这些内容也选择相对定位，设置属性right的值与上面标签的left值和为1，于是，就完成了~...
如何在前端中实现精美的图片和文字的垂直对齐
榕城候佳人的博客
04-01 1198
CSS的vertical-algin属性的使用场景：设置图片或者表单（行内块元素）和文字的垂直对齐。它只针对行内元素或者行内块元素有效。
解决文字、图片对齐空白缝隙
wzr728的博客
12-16 305
解决文字、图片对齐空白缝隙
Textvie实现左边图片和换行文字左对齐的方法
08-28
5. **添加换行和显示**：为了实现文字换行并保持左对齐，我们可以使用`tv.append("\n")`添加一个换行符，然后使用`tv.append(spanText)`将带有图片的文本追加到TextView中。 通过以上步骤，我们成功地在TextView中...
jquery.valign插件实现图片,文字上下左右垂直居中
06-10
今天特意在网上找到了一款插件--jquery.valign，可控制图片、文字在div容器内垂直上对齐、居中、底部对齐三种效果，使用方法： 1、调用jquery库以及本插件 2、jquery方法调用，如本案例第22、23行 使用说明：  外侧...
实现图片文字上下左右滑动
03-14
1. 图片和文字的对齐方式：根据设计需求，可能需要设置图片和文字的对齐方式，例如居中、左对齐或右对齐。 2. 图片加载优化：如果图片数量较多或大小较大，应考虑使用像Glide或Picasso这样的库来加载和缓存图片，以...
10.27.2020word中将图片对齐.docx
11-13
同时，需要注意图片的对齐方式，例如居中、左对齐、右对齐等。 此外，在 Word 中还可以使用其他方法来实现图片对齐，例如使用框架、文本框、图片框等。这些方法都可以帮助用户快速地将图片与文本融合，使文档变得...
微信小程序图片右边加两行文字的代码
10-15
`view_wenzi2` 作为文字容器，宽度为90px，且与图片之间有5px的间距，内部使用 `flex-direction: column` 实现文字的垂直布局。`text_small` 类用于调整子标题的字体大小和颜色，并使用 `word-break: break-all` ...
CSDN图片居中、左对齐、右对齐、大小设置
qq_42224089的博客
02-02 2066
在撰写CSDN博文时，经常需要对图片进行居中、左对齐、右对齐处理或者是修改图片的大小，进行等比例缩放或者是非等比例缩放
html语言图片对齐方式的设置
m0_60352504的博客
09-08 8044
使用<img>标签使图片左对齐或右对齐 <img src="D:\games\Wesnoth\editor.ico" align="left"> <br><br><br> <img src="D:\games\Wesnoth\editor.ico" align="right"> 使用<div>标签实现左对齐，右对齐，居中对齐 <div style="text-align:left"><img src="
图片和文字的对齐
ice-cream
11-07 226
最近工作中遇到些关于“图片和文字的对齐”的问题：   1.文字和图片，图片和图片底部对齐   类似结构   &lt;div&gt;&lt;img src="" /&gt;text&lt;/div&gt;或者&lt;div&gt;&lt;img src="" /&gt;&lt;img src="" /&gt;&lt;/div&a
HTML中图片和文字的对齐方式
热门推荐
小马过河
10-09 4万+
 文字和图片的对齐方式会影响到页面的整体效果，之前没有仔细研究过。 &lt;!doctype html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;图片与文字的相对位置&lt;/title&gt; &lt;style&a
文本居于图片左侧html,CSS实现图片与文本的居中对齐的常见方式
weixin_31860143的博客
06-01 2676
1.为图片和文本都设置vertical-align：middle!DOCTYPE html>Page Title.d1>* {vertical-align: middle;} 这是一段文本2.通过弹性布局实现，外层容器设置弹性布局，通过align-items: middle设置交叉轴居中对齐!DOCTYPE html>Page Title.d1 {display: flex...
html将图片左侧对齐,HTML/CSS - 如何将我的图像放置在右侧，以便它可以与左侧的文本对齐？...
weixin_39708557的博客
05-31 1068
看到下面的代码片段或小提琴的位置>第一。 .first_section上的填充是一个错误。这就是为什么你的内容定位如此之差，正如你所说：Both text and image seems to have skewed downward.秒。在.first_section上使用float:left;和width，因此它将继承其内容的高度。我用width:90%与margin:0 5%，因为我看...
html+img左侧文字,html – 使用css将左侧图像与右侧文本对齐
weixin_29317963的博客
05-30 1733
我需要将左侧的图像与右侧的文本对齐.我使用以下css.body {} #slideshow-nav {width: 700px;height: 30px;position: absolute;z-index: 999;bottom: 0;left: 11px;text-align: center;text-decoration: none;}#slideshow-nav a {background...
安卓用LinearLayout实现图片右对齐文字左对齐
07-12
您可以使用LinearLayout的属性来实现图片右对齐，文字左对齐的效果。以下是一个示例代码： ```xml android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation=...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值