标题不再位于容器的死点

时间:2017-05-01 05:17:45

标签: html css

我有一个div内的标题。我希望标题位于div的中心,但我需要文本很大。如果我没有指定字体大小,则标题将居中,但是一旦我输入文本大小的vm,它就会偏离中心。

<div>

<h1 style="position:absolute;top:50%;left:50%;font-size:20vw">
Header
</h1>

</div>

6 个答案:

答案 0 :(得分:2)

使用str.strip('\n')之类的

import json
import re
from collections import OrderedDict
from pprint import pprint


# Subdivides a collection of lines based on the delimiting regular expression.
# >>> example_string =' =============================
#                       asdfasdfasdf
#                       sdfasdfdfsdfsdf
#                       =============================
#                       asdfsdfasdfasd
#                       =============================
# >>> subdivide(example_string, "^=+")
# >>> ['asdfasdfasdf\nsdfasdfdfsdfsdf\n', 'asdfsdfasdfasd\n']
def subdivide(lines, regex):
    equ_pattern = re.compile(regex, re.MULTILINE)
    sections = equ_pattern.split(lines)
    sections = [section.strip('\n') for section in sections]
    return sections


# for processing sections with dashes in them, returns the heading of the section along with
# a dictionary where each key is the subsection's header, and each value is the text in the subsection.
def process_dashed_sections(section):

    subsections = subdivide(section, "^-+")
    heading = subsections[0]  # header of the section.
    d = {key: value for key, value in zip(subsections[1::2], subsections[2::2])}
    index_pattern = re.compile("\[(.+)\]", re.MULTILINE)

    # sort the dictionary by first capturing the pattern '[x]' and extracting 'x' number.
    # Then this is passed as a compare function to 'sorted' to sort based on 'x'.
    def cmp(d):
        mat = index_pattern.findall(d[0])
        if mat:
            print(mat[0])
            return int(mat[0])
        # There are issues when dealing with subsections containing '-'s but not containing '[x]' pattern.
        # This is just to deal with that small issue.
        else:
            return 0

    o_d = OrderedDict(sorted(d.items(), key=cmp))
    return heading, o_d


# this is to rename the keys of 'd' dictionary to the proper names present in the attendees.
# it searches for the best match for the key in the 'attendees' list, and replaces the corresponding key.
# >>> d = {'mr. man   ceo of company   [1]' : ' This is talk a' ,
#  ...     'ms. woman  ceo of company    [2]' : ' This is talk b'}
# >>> l = ['mr. man', 'ms. woman']
# >>> new_d = assign_attendee(d, l)
# new_d = {'mr. man': 'This is talk a', 'ms. woman': 'This is talk b'}
def assign_attendee(d, attendees):
    new_d = OrderedDict()
    for key, value in d.items():
        a = [a for a in attendees if a in key]
        if len(a) == 1:
            # to strip out any additional whitespace anywhere in the text including '\n'.
            new_d[a[0]] = value.strip()
        elif len(a) == 0:
            # to strip out any additional whitespace anywhere in the text including '\n'.
            new_d[key] = value.strip()
    return new_d


if __name__ == '__main__':
    with open('input.txt', 'r') as input:
        lines = input.read()

        # regex pattern for matching headers of each section
        header_pattern = re.compile("^.*[^\n]", re.MULTILINE)

        # regex pattern for matching the sections that contains
        # the list of attendee's (those that start with asterisks )
        ppl_pattern = re.compile("^(\s+\*)(.+)(\s.*)", re.MULTILINE)

        # regex pattern for matching sections with subsections in them.
        dash_pattern = re.compile("^-+", re.MULTILINE)

        ppl_d = dict()
        talks_d = dict()

        # Step1. Divide the the entire document into sections using the '=' divider
        sections = subdivide(lines, "^=+")
        header = []
        print(sections)
        # Step2. Handle each section like a switch case
        for section in sections:

            # Handle headers
            if len(section.split('\n')) == 1:  # likely to match only a header (assuming )
                header = header_pattern.match(section).string

            # Handle attendees/authors
            elif ppl_pattern.match(section):
                ppls = ppl_pattern.findall(section)
                d = {key.strip(): value.strip() for (_, key, value) in ppls}
                ppl_d.update(d)

                # assuming that if the previous section was detected as a header, then this section will relate
                # to that header
                if header:
                    talks_d.update({header: ppl_d})

            # Handle subsections
            elif dash_pattern.findall(section):
                heading, d = process_dashed_sections(section)

                talks_d.update({heading: d})

            # Else its just some random text.
            else:

                # assuming that if the previous section was detected as a header, then this section will relate
                # to that header
                if header:
                    talks_d.update({header: section})

        #pprint(talks_d)
        # To assign the talks material to the appropriate attendee/author. Still works if no match found.
        for key, value in talks_d.items():
            talks_d[key] = assign_attendee(value, ppl_d.keys())

        # ordered dict does not pretty print using 'pprint'. So a small hack to make use of json output to pretty print.
        print(json.dumps(talks_d, indent=4))

https://jsfiddle.net/wudquLpd/

答案 1 :(得分:1)

你正在制作中心,它使用左上角为中心

enter image description here

这就是为什么它从未真正处于div的中心。

建议达到中心你需要准确,就像你的H1应该有宽度和高度然后你可以这样做

<div>
  <h1 style="position: absolute;
    top: 50%;
    left: 50%;
    font-size: 10vw;
    background-color: #ff0000;
    margin-left: calc(-32vw/2);
    width: 32vw;
    height: 10vw;
    margin-top: calc(-10vw/2);">
    Header
  </h1>
</div>

答案 2 :(得分:0)

将填充和边距设置为0

<div>
  <h1 style="position:absolute;top:50%;left:50%;font-size:20vw;margin:0;padding:0">
    Header
  </h1>
</div>

它使文本从div的中心开始,而不是居中。但我想,根据您在问题中指定的内容,这就是您想要的方式

答案 3 :(得分:0)

请尝试这个,你不需要用这种方法计算任何东西。

<div><h1 style="width:90%;margin:auto;font-size:20vw;text-align:center">Header</h1></div>

答案 4 :(得分:0)

&#13;
&#13;
<div>
<h1 style="font-size:20vw;text-align:center">    Header    </h1>
</div>
&#13;
&#13;
&#13;

这可能也是解决您问题的方法之一。谢谢!

答案 5 :(得分:0)

<body>
  <div style="position: absolute; top:50%; left: 50%;">
     <h1 style="position: relative; left: -50%; font-size:10vw;">
        Header
     </h1>
  </div>
 </body>