Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/html/71.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181

Warning: file_get_contents(/data/phpspider/zhask/data//catemap/7/css/41.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Html 将div图标居中对齐,父div位于右上角_Html_Css - Fatal编程技术网

Html 将div图标居中对齐,父div位于右上角

Html 将div图标居中对齐,父div位于右上角,html,css,Html,Css,各位好,飞越者 我的目标是以下布局: 我当前的布局将右上角的div压缩到应该居中的div图标中 这里是CSS/HTML。非常感谢您的帮助 .places{ 显示器:flex; 柔性包装:包装; 证明内容:中心; } .地点h1{ 对齐内容:左上角; 字体大小:30px; 宽度:100%; } .放置物品{ 宽度:390px; 边框:#FF5A5F 1px实心; 边界半径:4px; 填充:20px; 利润率:20px; } .放置第h2条{ 字体大小:30px; 文本对齐:居中; } /*练习8

各位好,飞越者

我的目标是以下布局:

我当前的布局将右上角的div压缩到应该居中的div图标中

这里是CSS/HTML。非常感谢您的帮助

.places{
显示器:flex;
柔性包装:包装;
证明内容:中心;
}
.地点h1{
对齐内容:左上角;
字体大小:30px;
宽度:100%;
}
.放置物品{
宽度:390px;
边框:#FF5A5F 1px实心;
边界半径:4px;
填充:20px;
利润率:20px;
}
.放置第h2条{
字体大小:30px;
文本对齐:居中;
}
/*练习8*/
.按夜定价{
颜色:#FF5A5F;
边框:4px实心#FF5A5F;
边界半径:50%;
最小宽度:60px;
最大宽度:60px;
高度:60px;
字体大小:30px;
文本对齐:居中;
保证金:0;
浮动:对;
线高:60px;
}
.信息{
高度:80px;
边框顶部:#DDDDDD 1px实心;
边框底部:#DDDDDD 1px实心;
}
马克斯先生{
背景图片:url(“images/icon_group.png”);
背景重复:无重复;
宽度:100px;
显示:内联块;
利润率:7px;
线高:110px;
}
.房间数量{
背景图片:url(“images/icon_bed.png”);
背景重复:无重复;
宽度:100px;
显示:内联块;
利润率:7px;
线高:110px;
}
.浴室数量{
背景图片:url(“images/icon_bath.png”);
背景重复:无重复;
宽度:100px;
显示:内联块;
利润率:7px;
线高:110px;
}
.用户{
边缘底部:10px;
}
.说明{
文本对齐:左对齐;
浮动:左;
}

地点
家
$80
3位客人
2个房间
1浴室
所有者:约翰·列侬
Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来,Lorem Ipsum一直是行业标准的虚拟文本,当时一位不知名的印刷商拿起一个打印工具,将其拼凑成一本打印样本书。它不仅存活了五个世纪,而且还跨越到电子排版,基本上保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行,最近随着Aldus PageMaker等桌面出版软件的发布,包括Lorem Ipsum版本。
公寓
$65
3位客人
2个房间
1浴室
所有者:蒂娜·菲
Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来,Lorem Ipsum一直是行业标准的虚拟文本,当时一位不知名的印刷商拿起一个打印工具,将其拼凑成一本打印样本书。它不仅存活了五个世纪,而且还跨越到电子排版,基本上保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行,最近随着Aldus PageMaker等桌面出版软件的发布,包括Lorem Ipsum版本。
宿舍
$20
3位客人
2个房间
1浴室
所有者:洛莉
Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来,Lorem Ipsum一直是行业标准的虚拟文本,当时一位不知名的印刷商拿起一个打印工具,将其拼凑成一本打印样本书。它不仅存活了五个世纪,而且还跨越到电子排版,基本上保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行,最近随着Aldus PageMaker等桌面出版软件的发布,包括Lorem Ipsum版本。

我希望这是你想要的

.places{
显示器:flex;
柔性包装:包装;
证明内容:中心;
}
.地点h1{
对齐内容:左上角;
字体大小:30px;
宽度:100%;
}
.放置物品{
宽度:390px;
边框:#FF5A5F 1px实心;
边界半径:4px;
填充:20px;
利润率:20px;
位置:相对位置;
}
.放置第h2条{
字体大小:30px;
文本对齐:居中;
}
/*练习8*/
.按夜定价{
颜色:#FF5A5F;
边框:4px实心#FF5A5F;
边界半径:50%;
最小宽度:60px;
最大宽度:60px;
高度:60px;
字体大小:30px;
文本对齐:居中;
保证金:0;
线高:60px;
位置:绝对位置;
顶部:10px;
右:20px;
}
.信息{
高度:80px;
边框顶部:#DDDDDD 1px实心;
边框底部:#DDDDDD 1px实心;
}
马克斯先生{
背景图像:url(“https://s32.postimg.org/n1npuo6h1/test.png");
背景重复:无重复;
宽度:100px;
显示:内联块;
利润率:7px;
线高:110px;
文本对齐:居中;
背景位置:中上;
}
.房间数量{
背景图像:url(“https://s32.postimg.org/n1npuo6h1/test.png");
背景重复:无重复;
宽度:100px;
显示:内联块;
利润率:7px;
线高:110px;
文本对齐:居中;
背景位置:中上;
}
.浴室数量{
背景图像:url(“https://s32.postimg.org/n1npuo6h1/test.png");
背景重复:无重复;
宽度:100px;
显示:内联块;
利润率:7px;
线高:110px;
文本对齐:居中;
背景位置:中上;
}
.用户{
边缘底部:10px;
}
.说明{
文本对齐:左对齐;
浮动:左;
}

地点
家
$80
3位客人
2个房间
1浴室
所有者:约翰·列侬
Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来,Lorem Ipsum一直是业界标准的虚拟文本,当时一家未知的打印机使用了g