标签: centering

我正在使用这个脚本水平和垂直居中我的div.

当页面加载时,div会垂直居中,而不是水平居中,直到我调整浏览器大小.

我究竟做错了什么？

$(document).ready(function (){
    $(window).resize(function (){
        $('.className').css({
            position:'absolute',
            left: ($(window).width() - $('.className').outerWidth())/2,
            top: ($(window).height() - $('.className').outerHeight())/2
        });
    });
    $(window).resize();
});

在下面的代码中,只有第二种方法适用于我(.NET 4.0).FormStartPosition.CenterParent不会将子表单置于其父表单的中心.为什么？

资料来源:这个问题

using System;
using System.Drawing;
using System.Windows.Forms;

class Program
{
  private static Form f1;

  public static void Main()
  {
    f1 = new Form() { Width = 640, Height = 480 };
    f1.MouseClick += f1_MouseClick; 
    Application.Run(f1);
  }

  static void f1_MouseClick(object sender, MouseEventArgs e)
  {
    Form f2 = new Form() { Width = 400, Height = 300 };
    switch (e.Button)
    {
      case MouseButtons.Left:
      {
        // 1st method
        f2.StartPosition = FormStartPosition.CenterParent;
        break;
      }
      case MouseButtons.Right:
      {
        // 2nd …

我试图将一个小部件置于底部中心位于Column的底部,但它始终与左侧对齐.

return new Column(
  new Stack(
    new Positioned(
      bottom: 0.0, 
      new Center(
        new Container(),
      ),
    ),
  ),
); 

Positioned的存在迫使Container向左,而不是居中.但是,移除"定位"可将容器置于中间位置.

我目前正在为我的菜单系统上的Java游戏,我不知道如何可以从中心的文本Graphics.drawString(),因此,如果我想画一个文本,其中心点是在X: 50和Y: 50,和文字30像素宽,10像素高,文本将从X: 35和开始Y: 45.

在绘制文本之前,我可以确定文本的宽度吗？
然后这将很容易数学.

编辑:我也想知道我是否可以获得文本的高度,这样我也可以垂直居中.

任何帮助表示赞赏!

我的HTML有问题.我在互联网上搜索过,但仍然没有真正的答案.

我有一个带有一些图像的网站,我希望它们位于中间.现在,在我的屏幕上,它们位于中间位置,但那是因为我把它们移到了一边.当我的朋友们看着它时,图像偏离中心.

这是网站 ; 如果你在13.5英寸的屏幕上,它看起来就在中间.

有一个导航栏<div>,里面是一个<ul>,每个<li>包含<a>一个链接(这是一个导航栏)

我看了谷歌和这个网站,我无法找到我正在寻找的确切内容.

我想是能够让我当前的风格(使用<li>带<a>的内侧),我想的<li>是均匀分布的,并集中(这部分顺其自然,如果他们是均匀分布的...)内<ul>(这是内部的navbar <div>).

无论如何,如果这没有意义让我知道,目前他们只是左对齐...继承人我拥有:

HTML:

<div class="navbar">
  <ul>
    <li><a href="Home">Home</a></li>
    <li><a href="Discounts">Discounts</a></li>
    <li><a href="Contact">Contact Us</a></li>
    <li><a href="About">About Us</a></li>
  </ul>
</div>

CSS:

.navbar {
    width: 100%;
    margin-left: auto ;
    margin-right: auto ;
    background-color: #ABCDEF;
}
.navbar ul {
    list-style-type: none; /*to remove bullets*/
    text-align: center;
    margin: 0px;
    padding: 0px;
    width: 90%;
    overflow: hidden;
}
.navbar li{
    float: left;
    padding: 2px;
    width: 150px;
    margin-left: …

基本上,我想要居中文本,忽略任何浮动的兄弟元素.

起初,我认为这不会是一个问题,因为我认为浮动元素没有从任何兄弟元素的宽度中获取.

示例(我希望红色文本位于蓝色框的中心,尽管绿色文本)

如何最好地实现这一目标？

我试图将图像水平居中到zurb列,但似乎不可能.我尝试了一切,到处搜索,但我无法让它工作.

这是我的代码:

<div class="row">
    <div class="twelve columns"><br />
        <img src="img_06.jpeg" alt="slide image">
    </div>
</div>

目前风景图像在12列网格上没有问题,但是当出现肖像图像时,它位于网格的左侧.如果我给它一个25%的填充它去中心,但我使用PHP从文件夹中提取所有图像并动态生成代码,所以我不能在所有图像上有25%的填充(景观缩小).

谢谢

我正在尝试将body元素置于HTML页面的中心位置.

基本上,在CSS中我将body元素设置display: inline-block;为仅与其内容一样宽.这很好.但是,margin: 0px auto;不会将其放在页面上.

有谁知道如何解决这一问题？我希望大蓝色方块在页面上居中,而不是像现在一样向左浮动.

这是我的CSS:

body {
    display: inline-block;
    margin: 0px auto;
    text-align: center;
}

我正在尝试使用样式化的超链接为网站创建一些按钮.我设法让按钮看起来像我想要的,禁止一个小问题.我无法将文本(下面的源代码中的"链接")放到垂直居中.

不幸的是,第二个按钮可能会显示多行文本,所以我不能用line-height它来垂直居中.

我最初的解决方案是使用display: table-cell;而不是inline-block,并在Chrome,Firefox和Safari中对问题进行排序,但在Internet Explorer中没有,因此我认为我需要坚持使用内联块.

我如何在57pxx中垂直居中链接文本100px inline-block,并让它迎合多行文本？提前致谢.

CSS:

.button {
    background-image:url(/images/categorybutton-off.gif);
    color:#000;
    display:inline-block;
    height:57px;
    width:100px;
    font-family:Verdana, Geneva, sans-serif;
    font-size:10px;
    font-weight:bold;
    text-align:center;
    text-decoration:none;
    vertical-align:middle;
}
.button:hover {
    background-image:url(/images/categorybutton-on.gif);
}
.button:before {
    content:"Click Here For\A";
    font-style:italic;
    font-weight:normal !important;
    white-space:pre;
}

HTML:

<a href="/" class="button">Link</a>
<a href="/" class="button">Link<br />More Details</a>