div内图像的边距和垂直对齐
[英]Margins and vertical alignment of image inside div
问题描述
I'm trying to create a div with content inside containing an image to the left and text to the right. 
我正在尝试创建一个div，其内容内部包含左侧的图像和右侧的文本。 I'm able to set the margins correctly and the left alignment correctly for the text, however, the image is not vertically aligned and the margins fall off on the right when viewed in the responsive stacked view. 我能够为文本正确设置边距和正确地向左对齐，但是，在响应式堆叠视图中查看时，图像未垂直对齐，并且边距在右侧下降。
body { position: relative; height: 100vh; margin: 40px; background-color: #e6e6e6e6; color: #444; font: .9em Arial, sans-serif; } .wrapper { box-shadow: 0 5px 20px rgba(0, 0, 0, .25); border-radius: 5px; overflow: hidden; margin-bottom: 20px; } .wrapper div { min-height: 150px; overflow: hidden; } #one { background-color: white; float: left; margin: 10px 20px 10px 10px; width: 200px; white-space: nowrap; text-align: center; line-height: 100px; } #one img { vertical-align: middle; max-height: 25px; max-width: 160px; } .helper { display: inline-block; height: 100%; vertical-align: middle; } #two { background-color: white; overflow: hidden; margin: 10px; min-height: 100px; } @media screen and (max-width: 910px) { #one { float: none; margin-right: 0; width: auto; border: 0; } }
<body> <div class="wrapper"> <div id="one"> <span class="helper"></span> <img src="http://jsfiddle.net/img/logo.png" /> </div> <div id="two"> <h2>LOREM IPSUM</h2> <br> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor arcu ut tellus laoreet tristique. Aliquam erat volutpat. Ut sed lectus at lectus ultricies volutpat. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. volutpat lo..</p> <br> <p> <p> https://google.com/ </p> </div> </div> <div class="wrapper"> <div id="one"> <span class="helper"></span> <img src="http://jsfiddle.net/img/logo.png" /> </div> <div id="two"> <h2>LOREM IPSUM</h2> <br> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor arcu ut tellus laoreet tristique. Aliquam erat volutpat. Ut sed lectus at lectus ultricies volutpat. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. volutpat lo..</p> <br> <p> <p> https://google.com/ </p> </div> </div> </body>
1 个解决方案
解决方案1
0 已采纳 2019-02-20 19:26:16
I added 我加了
height:100%;
display:flex;
align-items:center;
justify-content:center;
to #one 到#one
body { position: relative; height: 100vh; margin: 40px; background-color: #e6e6e6e6; color: #444; font: .9em Arial, sans-serif; } .wrapper { box-shadow: 0 5px 20px rgba(0, 0, 0, .25); border-radius: 5px; overflow: hidden; margin-bottom: 20px; } .wrapper div { min-height: 150px; overflow: hidden; } #one { background-color: white; float: left; margin: 10px 20px 10px 10px; width: 200px; white-space: nowrap; text-align: center; line-height: 100px; height:100%; display:flex; align-items:center; justify-content:center; } #one img { vertical-align: middle; max-height: 25px; max-width: 160px; } .helper { display: inline-block; height: 100%; vertical-align: middle; } #two { background-color: white; overflow: hidden; margin: 10px; min-height: 100px; } @media screen and (max-width: 910px) { #one { float: none; margin-right: 0; width: auto; border: 0; } }
<body> <div class="wrapper"> <div id="one"> <span class="helper"></span> <img src="http://jsfiddle.net/img/logo.png" /> </div> <div id="two"> <h2>LOREM IPSUM</h2> <br> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor arcu ut tellus laoreet tristique. Aliquam erat volutpat. Ut sed lectus at lectus ultricies volutpat. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. volutpat lo..</p> <br> <p> <p> https://google.com/ </p> </div> </div> <div class="wrapper"> <div id="one"> <span class="helper"></span> <img src="http://jsfiddle.net/img/logo.png" /> </div> <div id="two"> <h2>LOREM IPSUM</h2> <br> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor arcu ut tellus laoreet tristique. Aliquam erat volutpat. Ut sed lectus at lectus ultricies volutpat. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. volutpat lo..</p> <br> <p> <p> https://google.com/ </p> </div> </div> </body>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
简单div内的垂直对齐 - Vertical alignment inside a simple div
div内文本的垂直对齐 - Vertical alignment of text inside div
文本和另一个内的div的垂直对齐 - Vertical alignment of text and a div inside another one
带有引导程序的 div 列内的垂直 alignment 5 - vertical alignment inside div column with bootstrap 5
DIV标签内图像的垂直对齐 - Vertical alignment of the image within a DIV tag
水平对齐到边距，同时不丢失垂直对齐 - Horizontal alignment to margins while not losing vertical alignment
使用边距对齐HTML div - HTML div alignment using margins
Div内的垂直对齐图像 - Vertical Align Image Inside Div
Div中的垂直/水平对齐 - Vertical/Horizontal Alignment in Div
垂直DIV对齐 - Vertical DIV Alignment
相关标签