让文本显示在导航栏下(Getting text to appear under navbar)

 我想让我的文字出现在屏幕中间。 我已经完成了这个工作，但是我认为我已经在编码方面做得不好，我想看看是否有更好的方法可以不做。 
 

 所以我这样做的方式是 
 

.homeMess {

    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -109px;
    margin-left: -725px;
}

 

 但使用margin-left: -725px; 我并不了解，所以试图寻找另一种方式。 
 

 我的html： 
 

    <div class="parallax">

 <div class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
                <div class="logo"><img src="Images/logo1.png"></div>
        </div>
          <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
              <li><a href="#">a</a></li>
              <li><a href="#">b</a></li>
              <li><a href="#">c</a></li>
              <li><a href="#">d</a></li>
            </ul>
          </div><!--/.nav-collapse -->
      </div>
    </div>
    <div class="container">
            <div class="homeMess ">
            <h1> a| v
        </div>
    </div>
        </div>

 

 CSS： 
 

body {
    font-family: 'Open Sans', sans-serif, Arial;
    font-size: 16px;
    color: #6D6D6D;
    background-color: #F5F5F5;
    font-weight: 300;
}
h1,h2,h3,h4,h5,h6 {
    font-family: 'Montserrat', sans-serif, Arial;

    padding-bottom: 5px;
    color: #373432;
    line-height: 1em;
    font-weight: normal;
}
a {
    text-decoration: none;
    outline: none;
}


.parallax {
    background-image: url("../Images/back1.jpg");
    min-height: 1000px;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
}

.parallax1 {
    min-height: 1000px;
}


.container {
    margin: 0;
    width: auto;
}   


.navbar-nav {
    float: right;
    margin-top: -15px;
}


.navbar-nav>li>a {
    line-height: 6px;
}


.navbar {
  padding-top: 46px;
  padding-right: 60px;
  font-size: 13px;
  text-transform: uppercase;
}

.navbar-default {
    background-color: transparent;
    border-top: 0px solid rgba(0, 0, 0, 0.5);
    border-bottom: 0px solid rgba(0, 0, 0, 0.5);
    border-left: 0px solid rgba(0, 0, 0, 0.5);
    border-right: 0px solid rgba(0, 0, 0, 0.5);
  -webkit-transition: background-color 200ms linear;
  -moz-transition: background-color 200ms linear;
  -o-transition: background-color 200ms linear;
  -ms-transition: background-color 200ms linear;
  transition: background-color 200ms linear;
  height: 87px;
}

.navbar-default .navbar-nav>li>a {
    color: #ffffff;
}

.navbar-default .navbar-nav > li > a:hover, 
.navbar-default .navbar-nav > li > a:focus {
      background-color: #F8BD23;
      text-decoration: none;
       color: #ffffff;
    -webkit-transition: background-color 200ms linear;
    -moz-transition: background-color 200ms linear;
    -o-transition: background-color 200ms linear;
    -ms-transition: background-color 200ms linear;
    transition: background-color 200ms linear;
    }

    .navbar-nav > li{
  padding-left:30px;

}

.logo {
    margin-left: 40px;
    margin-top: -17px;

}

.homeMess {

    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -109px;
    margin-left: -725px;
}

.homeMess h1 {
    font-size: 100px;
    text-transform: uppercase;
    font-weight: 900;
    font-size: 60px;
    letter-spacing: -5px;
    line-height: 50px;
    color: white;

}

 

 所以我只是想让homeMess教室的课程处于屏幕中间，但我的做法并不好。 另外我正在使用bootstrap v3。 

I want to get my text to appear in the middle of the screen. I have done this but I think I have done this in a bad way of coding and I want to see if there is a better way of doing it without doing. 
 

So the way I did it was 
 

.homeMess {

    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -109px;
    margin-left: -725px;
}

 

but using margin-left: -725px; is not amazing I know so trying to find another way. 
 

My html: 
 

    <div class="parallax">

 <div class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
                <div class="logo"><img src="Images/logo1.png"></div>
        </div>
          <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
              <li><a href="#">a</a></li>
              <li><a href="#">b</a></li>
              <li><a href="#">c</a></li>
              <li><a href="#">d</a></li>
            </ul>
          </div><!--/.nav-collapse -->
      </div>
    </div>
    <div class="container">
            <div class="homeMess ">
            <h1> a| v
        </div>
    </div>
        </div>

 

CSS: 
 

body {
    font-family: 'Open Sans', sans-serif, Arial;
    font-size: 16px;
    color: #6D6D6D;
    background-color: #F5F5F5;
    font-weight: 300;
}
h1,h2,h3,h4,h5,h6 {
    font-family: 'Montserrat', sans-serif, Arial;

    padding-bottom: 5px;
    color: #373432;
    line-height: 1em;
    font-weight: normal;
}
a {
    text-decoration: none;
    outline: none;
}


.parallax {
    background-image: url("../Images/back1.jpg");
    min-height: 1000px;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
}

.parallax1 {
    min-height: 1000px;
}


.container {
    margin: 0;
    width: auto;
}   


.navbar-nav {
    float: right;
    margin-top: -15px;
}


.navbar-nav>li>a {
    line-height: 6px;
}


.navbar {
  padding-top: 46px;
  padding-right: 60px;
  font-size: 13px;
  text-transform: uppercase;
}

.navbar-default {
    background-color: transparent;
    border-top: 0px solid rgba(0, 0, 0, 0.5);
    border-bottom: 0px solid rgba(0, 0, 0, 0.5);
    border-left: 0px solid rgba(0, 0, 0, 0.5);
    border-right: 0px solid rgba(0, 0, 0, 0.5);
  -webkit-transition: background-color 200ms linear;
  -moz-transition: background-color 200ms linear;
  -o-transition: background-color 200ms linear;
  -ms-transition: background-color 200ms linear;
  transition: background-color 200ms linear;
  height: 87px;
}

.navbar-default .navbar-nav>li>a {
    color: #ffffff;
}

.navbar-default .navbar-nav > li > a:hover, 
.navbar-default .navbar-nav > li > a:focus {
      background-color: #F8BD23;
      text-decoration: none;
       color: #ffffff;
    -webkit-transition: background-color 200ms linear;
    -moz-transition: background-color 200ms linear;
    -o-transition: background-color 200ms linear;
    -ms-transition: background-color 200ms linear;
    transition: background-color 200ms linear;
    }

    .navbar-nav > li{
  padding-left:30px;

}

.logo {
    margin-left: 40px;
    margin-top: -17px;

}

.homeMess {

    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -109px;
    margin-left: -725px;
}

.homeMess h1 {
    font-size: 100px;
    text-transform: uppercase;
    font-weight: 900;
    font-size: 60px;
    letter-spacing: -5px;
    line-height: 50px;
    color: white;

}

 

So I am just trying to get the homeMess class to be in the middle of the screen but the way I am doing it is not good. Also I am using bootstrap v3. 

原文：https://stackoverflow.com/questions/45394524
2022-08-10 16:08

满意答案

 这是适用于我的解决方案。 
 

FactoryGirl.define do

  factory :company do
    #company attributes
  end

  factory :user do
   companies {[FactoryGirl.create(:company)]}
   #user attributes
  end

end

 

 如果你需要特定的公司，你可以这样使用工厂 
 

company = FactoryGirl.create(:company, #{company attributes})
user = FactoryGirl.create(:user, :companies => [company])

 

 希望这将有助于某人。 

Factorygirl has since been updated and now includes callbacks to solve this problem. Take a look at http://robots.thoughtbot.com/post/254496652/aint-no-calla-back-girl for more info.

相关问答

更多

工厂女孩嵌套协会(Factory Girl Nested Associations)

您需要create而不是build 。 这应该工作： FactoryGirl.define do factory :user do after(:create) do |user| user.subscription = FactoryGirl.create(:subscription) end end factory :plan do usage_limit end factory :subscription do plan ...

如何在工厂女孩中创建has_and_belongs_to_many关联(How to create has_and_belongs_to_many associations in Factory girl)

这是适用于我的解决方案。 FactoryGirl.define do factory :company do #company attributes end factory :user do companies {[FactoryGirl.create(:company)]} #user attributes end end 如果你需要特定的公司，你可以这样使用工厂 company = FactoryGirl.create(:company, #{com...

工厂女孩与同一父母有多个联系(Factory Girl with multiple associations with the same parent)

对于我通常在FactoryGirl使用after(:build)使用的关联，然后我可以确切地说明应该发生什么。 （ association xxx通常不像我想要的那样工作，对我感到羞耻。） 所以在你的情况下，我认为你可以解决这个问题： require 'faker' FactoryGirl.define do factory :adhoc_mapping do |f| transient do default_parent { Parent.where(parent: F...

Factory_girl使用#create_list，在所有创建的对象之间共享相同的关联(Factory_girl using #create_list, share the same associations between all created objects)

您应该能够像其他属性一样分配关系。 例如： user = create(:user) foobar = create(:foobar) blogs = create_list(:blog, 5, user: user, foobar: foobar) You should be able to assign the relationships like other attributes. e.g: user = create(:user) foobar = create(:foobar) blo...

使用带参数的范围和与ActiveRecord（Ruby）的has_and_belongs_to_many关联(using scopes with parameters and has_and_belongs_to_many associations with ActiveRecord (Ruby))

对于ActiveRecord 4，您应该使用范围块内的新样式查询接口 http://guides.rubyonrails.org/active_record_querying.html 完全未经测试，但以下内容应该是如何构建查询的指南:(请注意，每个方法都链接到上面的方法） scope :unread, { joins( "LEFT JOIN notifications_users ON notifications.id = notifications_users.notification...

多个工厂女孩协会问题(Multiple Factory Girl associations issue)

事实证明，你不能在工厂内真正做到这种关系。 最后，我删除了关联，并首先手动构建代理和任何其他关联，然后将它们传递到工厂的构建中。 例如： let(:agency) { build(:agency) } let(:account_manager) { build(:agent, agency: agency) } let(:landlord) { build(:landlord, agency: agency) } let(:property) { build(:property, ...

如何使用has_and_belongs_to_many关联获取FactoryGirl模型属性？(How to get FactoryGirl model attributes with has_and_belongs_to_many association?)

以下是解释的答案： FactoryGirl.define do factory :trip do description { Faker::Lorem.sentence } end_date { DateTime.now + 1.day } after(:build) do |trip, evaluator| trip.countries << FactoryGirl.create(:country, :with_currencies) end...

工厂女孩 - 有很多协会(Factory Girl - has many associations)

不要为所有用户执行此操作，而应创建从用户工厂继承的另一个工厂。 Factory.define :user_with_group, :parent => :user do |u| u.groups { |g| [ g.association(:group), g.association(:group) ]} end 你可以在https://github.com/drhenner/ror_ecommerce/tree...

Rspec，Factory Girl使用has_many构建(Rspec, Factory Girl build with has_many)

最后，我使用FactoryGirl特性和attributes 这是poll工厂代码： FactoryGirl.define do factory :poll do title { FFaker::Lorem.phrase } description { FFaker::Lorem.sentences } user choices_attributes { [FactoryGirl.attributes_for(:choice), FactoryGirl....

无法让'has_and_belongs_to_many'工作(Can't get 'has_and_belongs_to_many' to work)

试试这样： class Activity < ActiveRecord::Base belongs_to :pictogram has_and_belongs_to_many :users accepts_nested_attributes_for :pictogram, allow_destroy: false def user_ids=(values) self.users << User.find(values) end end #controller d...

相关文章

更多

SVG文本text

网络挖掘技术——text mining

一、中文分词：分词就是利用计算机识别出文本中词汇的过程。 1.典型应用：汉字处理：拼音输入法、手写识别 ...

左则导航鼠标滑过时显示详情的实现

当滑过左边导航栏时右边出现描述框的制作。 1. hover时如何把右边的边框去掉。 2.如何让 外 ...

java.text.DecimalFormat 的问题

各位好，我用java.text.DecimalFormat做一些格式化的工作，我的代码如下： Dec ...

企业级搜索引擎Solr 第二章 Schema和文本分析（Schema and Text Analysis）[2]

文章转载自网易博客，原文地址：http://quweiprotoss.blog.163.com/blo ...

Solr官方文档系列——Text Analysis

Text fields are typically indexed by breaking the t ...

Django and full-text search

Structure in the flow &raquo; Blog Archive &raquo; ...

jquery 怎么得到link中text的属性

&lt;a href=&quot;http://www.baidu.com&quot;&gt;r亮高亮 ...

Full-Text Search in ASP.NET using Lucene.NET

This post is about the full-text search engine ...

用‘button’跟‘text’组合代替‘file’，选择文件后点‘submit’，‘file’的值被清空

各位大虾晚上好，我有个问题想请教你们，我想美化html的file外观，但貌似现在还不能用css直接设计 ...

最新问答

更多

获取MVC 4使用的DisplayMode后缀(Get the DisplayMode Suffix being used by MVC 4)

我用Google搜索了一个解决方案。 “EnumDisplayModeProvider”是我自己设置网站的各种模式的枚举。 public EnumDisplayModeProvider GetDisplayModeId() { foreach (var mode in DisplayModeProvider.Instance.Modes) if (mode.CanHandleContext(HttpContext)) {

如何通过引用返回对象？(How is returning an object by reference possible?)

这相对简单：在类的构造函数中，您可以分配内存，例如使用new 。 如果你制作一个对象的副本，你不是每次都分配新的内存，而是只复制指向原始内存块的指针，同时递增一个也存储在内存中的引用计数器，使得每个副本都是对象可以访问它。 如果引用计数降至零，则销毁对象将减少引用计数并仅释放分配的内存。 您只需要一个自定义复制构造函数和赋值运算符。 这基本上是共享指针的工作方式。 This is relatively easy: In the class' constructor, you allocate m

矩阵如何存储在内存中？(How are matrices stored in memory?)

正如它在“熵编码”中所说的那样，使用Z字形图案，与RLE一起使用，在许多情况下，RLE已经减小了尺寸。 但是，据我所知，DCT本身并没有给出稀疏矩阵。 但它通常会增强矩阵的熵。 这是compressen变得有损的点：输入矩阵用DCT传输，然后量化量化然后使用霍夫曼编码。 As it says in "Entropy coding" a zig-zag pattern is used, together with RLE which will already reduce size for man

每个请求的Java新会话？(Java New Session For Each Request?)

你是如何进行重定向的？ 您是否事先调用了HttpServletResponse.encodeRedirectURL（）？ 在这里阅读javadoc 您可以使用它像response.sendRedirect(response.encodeRedirectURL(path)); The issue was with the path in the JSESSIONID cookie. I still can't figure out why it was being set to the tomca

css：浮动div中重叠的标题h1(css: overlapping headlines h1 in floated divs)

我认为word-break ，如果你想在一个单词中打破行，你可以指定它，这样做可以解决问题： .column { word-break:break-all; } jsFiddle演示。 您可以在此处阅读有关word-break属性的更多信息。 I think word-break, with which you can specify if you want to break line within a word, will do the trick: .column { word-break

无论图像如何，Caffe预测同一类(Caffe predicts same class regardless of image)

我认为您忘记在分类时间内缩放输入图像，如train_test.prototxt文件的第11行所示。 您可能应该在C ++代码中的某个位置乘以该因子，或者使用Caffe图层来缩放输入（请查看ELTWISE或POWER图层）。 编辑： 在评论中进行了一次对话之后，结果发现在classification.cpp文件中错误地删除了图像均值，而在原始训练/测试管道中没有减去图像均值。 I think you have forgotten to scale the input image during cl

xcode语法颜色编码解释？(xcode syntax color coding explained?)

转到： Xcode => Preferences => Fonts & Colors 您将看到每个语法高亮颜色旁边都有一个简短的解释。 Go to: Xcode => Preferences => Fonts & Colors You'll see that each syntax highlighting colour has a brief explanation next to it.

在Access 2010 Runtime中使用Office 2000校对工具(Use Office 2000 proofing tools in Access 2010 Runtime)

你考虑过第三方拼写检查吗？ 您可以将在C＃中开发的自定义WinForms控件插入访问数据库吗？ VB6控件怎么样？ 如果你能找到一个使用第三方库进行拼写检查的控件，那可能会有效。 Have you considered a third party spell checker? Can you insert a custom WinForms controls developed in C# into an access database? What about a VB6 control? If

从单独的Web主机将图像传输到服务器上(Getting images onto server from separate web host)

我有同样的问题，因为我在远程服务器上有两个图像，我需要在每天的预定义时间复制到我的本地服务器，这是我能够提出的代码... try { if(@copy('url/to/source/image.ext', 'local/absolute/path/on/server/' . date("d-m-Y") . ".gif")) { } else { $errors = error_get_last(); throw new Exception($err

从旧版本复制文件并保留它们（旧/新版本）(Copy a file from old revision and keep both of them (old / new revision))

我不确定我完全明白你在说什么。 你能编辑你的帖子并包含你正在做的Subversion命令/操作的特定顺序吗？ 最好使用命令行svn客户端，以便容易为其他人重现问题。 如果您只是想获取文件的旧副本（即使该文件不再存在），您可以使用如下命令： svn copy ${repo}/trunk/moduleA/file1@${rev} ${repo}/trunk/moduleB/file1 其中${repo}是您的存储库的URL， ${rev}是您想要的文件的版本。 这将恢复该文件的旧版本，包括最高版本

Copyright ©2023 peixunduo.com All Rights Reserved.粤ICP备14003112号

本站部分内容来源于互联网，仅供学习和参考使用，请莫用于商业用途。如有侵犯你的版权，请联系我们(neng862121861#163.com)，本站将尽快处理。谢谢合作！