Question

我在谷歌网站的主页上工作。在中心一个搜索任务的文本框，并搜索它附近的buton，但我有很多本地化的问题。首先，我有我的网站顶部的文字，我想在同一行的不同地方找到。左和右。例如左侧的DE / FR等语言选项，同一行右侧的Login / Help。在右边，我尝试了这个;

 #right
{   
    position:relative;
    top:10% ;
    left:61%;
    margin-right:10px;
}



<a href="login.php" id="right" >Login</a>

当我这样做时，它看起来像我想要但当我使页面较小时整个内容搞砸包括搜索按钮。最后我试着像我说的那样在文本框附近放置按钮，但我不能。我的意思是我有一个问题位置相同的车道事情..我在这里看到我的问题，但无法找到完全类似我的，ty。

Answer 1

下面：http://jsfiddle.net/leojavier/gbuLykdj/3/ 只需将容器显示为表格，将内容显示为表格单元格。这将允许您垂直居中元素

 <div class='container'>
      <section><input type="text" placeholder="search"><button>search</button></section>
    </div>

CSS

html, body {
    height:100%;
    width:100%;
    margin:0;
    padding:0;
    font-family:arial;
}

.container{
    display:table;
    height:100%;
    width:100%;
}

section{
    display:table-cell;
    vertical-align:middle;
    text-align:center;
}

如何在同一行中本地化事物

1 个答案: