草庐IT

行内元素&块级元素的水平垂直居中方法

Allerge 2023-03-28 原文

今天实习面试的时候,问到了这个问题,一时间只是知道块元素的方法,行内的方法知道但是觉得那是控制文字的显示方法,犹豫没有说。面试官接着就问了我行内元素跟块级元素的区别。下面是整理。

行内元素&块级元素

行内元素：与其他元素共占一行，一行排满前不换行，不能设置宽高，没有水平方向的margin和padding。常见有img，span，select，input，a
块级元素：占据整行，能设置宽高，能设置margin和padding的宽高。常见有ul，p（段落）,table(表格),form(表单)

行元素转换为块级元素/行内块

float:left;
position:absolute/fixed;转换成行内块定位使行内元素转换为块级元素
display:block/inline-block;

水平垂直方法

行内元素

line-height:内容高度;
tex-align:center;

块级元素

1.定位+margin方法

定位上下左右值为0,然后margin:auto实现

	 .fa{//父元素设置绝对定位
            position: relative;
            width: 500px;
            height: 500px;
            background-color:#eee
            }
         .son{//子元素设置绝对属性上下左右值为0,margin:auto
            position:absolute;
            top:0;
            left:0;
            right:0;
            bottom:0;
            margin: auto;
            width:20px;
            height:50px;
            background-color:#999;
            }

2.定位+margin/tansform方法

子元素在绝对定位下移动父盒子一半宽高,再通过margin操作向反方向移动半个子盒子的宽高

 	.fa{
            position: relative;
            width: 500px;
            height: 500px;
            background-color:#eee
            }
            .son{
            position:absolute;
            top:50%;
            left:50%;
            margin-top: -10px;
            margin-left: -25px;
            width:20px;
            height:50px;
            background-color:#999;
            }

通过transform:tanslateX()/translateY()反方向移动半个子盒子的宽高实现

	.fa{
            position: relative;
            width: 500px;
            height: 500px;
            background-color:#eee
            }
        .son{
            position:absolute;
            top:50%;
            left:50%;             
            width:20px;
            height:50px;
            background-color:#999;
            transform: translateX(-10px);
            transform:translateY(-25px);           
            }

3.flex方法
父盒子设置flex:flex;设置主轴居中justify-content:center;侧轴居中align-items:center;

   	.fa{
            display: flex;
            justify-content: center;
            align-items: center;
            width: 500px;
            height: 500px;
            background-color:#eee
            }
        .son{            
            width:20px;
            height:50px;
            background-color:#999;
            transform: translateX(-10px);
            transform:translateY(-25px);           
            }
行内ampbackground-colormarginHtml/Css

有关行内元素&块级元素的水平垂直居中方法的更多相关文章

  1. ruby - 如何使用 Nokogiri 的 xpath 和 at_xpath 方法 - 2

    我正在学习如何使用Nokogiri，根据这段代码我遇到了一些问题:require'rubygems'require'mechanize'post_agent=WWW::Mechanize.newpost_page=post_agent.get('http://www.vbulletin.org/forum/showthread.php?t=230708')puts"\nabsolutepathwithtbodygivesnil"putspost_page.parser.xpath('/html/body/div/div/div/div/div/table/tbody/tr/td/div

  2. ruby - 如何从 ruby​​ 中的字符串运行任意对象方法？ - 2

    总的来说，我对ruby​​还比较陌生，我正在为我正在创建的对象编写一些rspec测试用例。许多测试用例都非常基础，我只是想确保正确填充和返回值。我想知道是否有办法使用循环结构来执行此操作。不必为我要测试的每个方法都设置一个assertEquals。例如:describeitem,"TestingtheItem"doit"willhaveanullvaluetostart"doitem=Item.new#HereIcoulddotheitem.name.shouldbe_nil#thenIcoulddoitem.category.shouldbe_nilendend但我想要一些方法来使用

  3. ruby - 为什么我可以在 Ruby 中使用 Object#send 访问私有(private)/ protected 方法？ - 2

    类classAprivatedeffooputs:fooendpublicdefbarputs:barendprivatedefzimputs:zimendprotecteddefdibputs:dibendendA的实例a=A.new测试a.foorescueputs:faila.barrescueputs:faila.zimrescueputs:faila.dibrescueputs:faila.gazrescueputs:fail测试输出failbarfailfailfail.发送测试[:foo,:bar,:zim,:dib,:gaz].each{|m|a.send(m)resc

  4. ruby - Facter::Util::Uptime:Module 的未定义方法 get_uptime (NoMethodError) - 2

    我正在尝试设置一个puppet节点，但ruby​​gems似乎不正常。如果我通过它自己的二进制文件(/usr/lib/ruby/gems/1.8/gems/facter-1.5.8/bin/facter)在cli上运行facter，它工作正常，但如果我通过由ruby​​gems(/usr/bin/facter)安装的二进制文件，它抛出:/usr/lib/ruby/1.8/facter/uptime.rb:11:undefinedmethod`get_uptime'forFacter::Util::Uptime:Module(NoMethodError)from/usr/lib/ruby

  5. ruby-on-rails - rails : "missing partial" when calling 'render' in RSpec test - 2

    我正在尝试测试是否存在表单。我是Rails新手。我的new.html.erb_spec.rb文件的内容是:require'spec_helper'describe"messages/new.html.erb"doit"shouldrendertheform"dorender'/messages/new.html.erb'reponse.shouldhave_form_putting_to(@message)with_submit_buttonendendView本身，new.html.erb，有代码:当我运行rspec时，它失败了:1)messages/new.html.erbshou

  6. ruby-on-rails - 由于 "wkhtmltopdf"，PDFKIT 显然无法正常工作 - 2

    我在从html页面生成PDF时遇到问题。我正在使用PDFkit。在安装它的过程中，我注意到我需要wkhtmltopdf。所以我也安装了它。我做了PDFkit的文档所说的一切......现在我在尝试加载PDF时遇到了这个错误。这里是错误:commandfailed:"/usr/local/bin/wkhtmltopdf""--margin-right""0.75in""--page-size""Letter""--margin-top""0.75in""--margin-bottom""0.75in""--encoding""UTF-8""--margin-left""0.75in""-

  7. ruby-on-rails - 'compass watch' 是如何工作的/它是如何与 rails 一起使用的 - 2

    我在我的项目目录中完成了compasscreate.和compassinitrails。几个问题:我已将我的.sass文件放在public/stylesheets中。这是放置它们的正确位置吗？当我运行compasswatch时，它不会自动编译这些.sass文件。我必须手动指定文件:compasswatchpublic/stylesheets/myfile.sass等。如何让它自动运行？文件ie.css、print.css和screen.css已放在stylesheets/compiled。如何在编译后不让它们重新出现的情况下删除它们？我自己编译的.sass文件编译成compiled/t

  8. Ruby 方法() 方法 - 2

    我想了解Ruby方法methods()是如何工作的。我尝试使用“ruby方法”在Google上搜索，但这不是我需要的。我也看过ruby​​-doc.org，但我没有找到这种方法。你能详细解释一下它是如何工作的或者给我一个链接吗？更新我用methods()方法做了实验，得到了这样的结果:'labrat'代码classFirstdeffirst_instance_mymethodenddefself.first_class_mymethodendendclassSecond使用类#returnsavailablemethodslistforclassandancestorsputsSeco

  9. ruby-on-rails - 如何从 format.xml 中删除 <hash></hash> - 2

    我有一个对象has_many应呈现为xml的子对象。这不是问题。我的问题是我创建了一个Hash包含此数据，就像解析器需要它一样。但是rails自动将整个文件包含在.........我需要摆脱type="array"和我该如何处理？我没有在文档中找到任何内容。 最佳答案 我遇到了同样的问题；这是我的XML:我在用这个:entries.to_xml将散列数据转换为XML，但这会将条目的数据包装到中所以我修改了:entries.to_xml(root:"Contacts")但这仍然将转换后的XML包装在“联系人”中，将我的XML代码修改为

  10. ruby - 检查 "command"的输出应该包含 NilClass 的意外崩溃 - 2

    为了将Cucumber用于命令行脚本，我按照提供的说明安装了arubagem。它在我的Gemfile中，我可以验证是否安装了正确的版本并且我已经包含了require'aruba/cucumber'在'features/env.rb'中为了确保它能正常工作，我写了以下场景:@announceScenario:Testingcucumber/arubaGivenablankslateThentheoutputfrom"ls-la"shouldcontain"drw"假设事情应该失败。它确实失败了，但失败的原因是错误的:@announceScenario:Testingcucumber/ar

随机推荐