Center text and pictures

Center text and pictures
0.0 0

#1

so far I have to pics and topics for my tribute page but but i cant seem to figure out how center the text and pictures correctly . I tried using text-align: center; and margin auto but it only centers the first row of text and picture does not move

and yes i know there to much information , I’m just copying and passing to get an idea on what it would look like

<html>
    <head>
        <title></title>
        <style>
            body{
                background-color: #f4f4f4;
                font-family: Arial, Helvetica, Sans-Serif;
                font-size: 16px;
                line-height:1.6em;
                
            }
            
            .contaier li{
                text-align: center;
                margin:auto;
                
               
            }

            .contaier h2{
                text-align: center;
            }

            #tribute-info{
                text-align:;
            }

            

            
        </style>
    </head>
    <body>
        <header>
            <div id="img">
            <id="img-caption"><img src="Satoru Iwata.jpg" atl="Satoru Iwata"></id>
            <br>
            <id="tribute-info">Satoru Iwata</id>
            </div>
            </header>
            <main>
                <div class="contaier">
                <h2>Early life</h2>
                <ul>
                    <li>Satoru Iwata was born on December 6, 1959, and raised in Sapporo, Japan, where his father served as a prefectural official.[2][3] Throughout middle and high school, Iwata displayed leadership skills through service as class president, student council president, and club president at various times</li>
                    <li>Iwata obtained his first computer, a Commodore PET, in 1978.[5] He dismantled and studied the machine out of his desire to understand it. The computer coincidentally had a central processing unit (MOS 6502) similar to the one used by Nintendo for the Nintendo Entertainment System (NES), a gaming console for which he would later develop games</li>
                    <l1>Following high school, Iwata was admitted to the Tokyo Institute of Technology in April 1978, where he majored in computer science.[5][6][9] Tomohiko Uematsu, an engineering professor, noted Iwata's proficiency with software programming and remarked that Iwata could write programs faster and more accurately than any of his other students.[10]</l1>
                    <li>While attending the school, he was one of several unpaid interns at Commodore Japan, assisting the subsidiary's head engineer—Yash Terakura[8]—with technical and software-development tasks.[11] One of his main reasons for taking the job was to spend more time around computers and learn of details not openly available to the publ</li>
                </ul>

                <h2>HAL Laboratory</h2>
                <id="img-Hal"><img src="Satoru HAL Laboratory.jpg" alt="HAl Lab"></id>
                <ul>
                    <li>While attending university, Iwata worked for HAL Laboratory as a part-time programmer in 1980.[13][16] Among their first creations was a peripheral device that enabled older computers to display graphics for video games. With this device, Iwata and members of HAL created multiple games that were "straight rip-offs of Namco’s Rally-X, Galaxian, and others".[17] Despite this, HAL became the first company to establish a license with Namco for developing games.[17] He joined the company in a full-time capacity after graduating in 1982, becoming its fifth employee and only programmer</li>
                    <li>Iwata became the company's coordinator of software production in 1983, the time during which he helped HAL create a relationship with Nintendo so they would be able to produce games for its newly released Nintendo Entertainment System. He traveled to Kyoto himself to request permission to work on games for the NES, to which Nintendo obliged.[15] His first commercially published game was Joust for the NES—a port of the 1982 arcade game.[8] Other video games he worked on were Balloon Fight, NES Open Tournament Golf, EarthBound, and the Kirby games.[</li>
                    <l1>Iwata's proficiency with programming quickly placed him in high esteem among fellow programmers and gamers alike. He would often continue to work on weekends and holidays because of his passion.[20] With the company on the verge of bankruptcy, Iwata was promoted to president of HAL in 1993 at the insistence of Nintendo's then-President, Hiroshi Yamauchi.[13] With assistance from Nintendo, Iwata helped turn the company around from its ¥1.5 billion debt and stabilize its finances within six years.[2][7][14][21] Lacking experience in management, Iwata put a lot of effort into learning how to better himself, often reading books on the topic and seeking advice from others.[22</l1>
                    <li>Although he was not part of Nintendo at the time, Iwata assisted in the development of Pokémon Gold and Silver, which were released for the Game Boy Color in November 1999, by creating a set of compression tools utilized for graphics in the games.[23] While working as a go-between for Game Freak and Nintendo, he aided in the programming of Pokémon Stadium for the Nintendo 64 by reading the original coding in Pokémon Red and Green and porting the battle system into the new game in just one week.[13][23] According to Tsunekazu Ishihara, the president of The Pokémon Company, Iwata was instrumental in bringing Pokémon to Western markets. While being president of HAL, he developed the plan for localization after reviewing the code for Red and Green, which was then completed by Teruki Murakawa, with the Western releases coming two years after their Japanese release.[24] Additionally, he assisted Masahiro Sakurai in the development of Super Smash Bros. for the Nintendo 64.[13]</li>
                </ul>

                <h2>Early years (2000–02)[</h2>
                <ul>
                    <li>In 2000, Iwata took a position at Nintendo as the head of its corporate planning division and took a seat on the board of directors.[5] Over the next two years, he sought to reduce the cost and length of game development while preserving quality.[25] During his first two years at Nintendo, the company saw profit increases of 20 and 41 percent, values which are at least partially attributable to his work.[16] When Yamauchi, the company's president since 1949, retired on May 24, 2002,</li>
                    <li>At the time of Iwata's promotion, Nintendo, though still a profitable company, was not performing as well as other console makers. The recently released GameCube was performing poorly compared to competitors, with Sony's PlayStation 2 and Microsoft's Xbox outselling it</li>
                    <li>One of his first actions as president was to meet directly with the company's 40 department heads and 150 other employees. This contrasted starkly with Yamauchi's practice of rarely meeting with employees and generally having a single, annual speech. Shigeru Miyamoto described the previous business atmosphere as "stuffy" and stated Iwata "improved the ventilation".[32] Iwata was acutely aware that his position as president would not ensure compliance from his employees and sought to communicate with them on a personal level.</li>
                </ul>

                <h2>Revitalization of the company (2003–09)[</h2>
                <ul>
                    <li>Following up on his 2002 interview,[31] Iwata highlighted an urgency in the gaming market in his keynote speech at the 2003 Tokyo Game Show. During this speech, he reflected on the history of the industry and concluded with the declining interest in video games.[36] A slump in sales in the Japanese market had begun at the end of the 1990s and continued into the early 2000s. Competition between Nintendo and Sony resulted in increasingly hardware-heavy consoles; however, the Nintendo 64 proved to be too cumbersome for developers and software suffered severely</li>
                    <li>After a year-long analysis conducted at Iwata's behest, Nintendo concluded that pushing hardware was not the most effective way to promote video games and decided to focus on software.[36] A major internal reorganization of Nintendo took place in 2004, with Iwata consolidating various departments established under Yamauchi. He sought to promote collaborative work throughout the company.[30] He later established a "User Expansion Project" in 2005 whereby employees normally not</li>
                    <li>In a March 2004 interview, Iwata stated: "Games have come to a dead end."[39] He stressed that developers wasted far too much time focusing on core gamers and would be unable to turn a profit if they did not tend to the average game player. Furthermore, he wished to prove that Nintendo, considered a "conservative" company at the time, would become a forefront innovator of entertainment</li>
                </ul>

                <h2>Financial downturn (2010–14)[</h2>The Wii U, released in November 2012,[94] was sold below its production cost as Nintendo hoped for stronger software sales to alleviate ongoing losses.[95] The addition of HD graphics, a feature not present in the original Wii, placed unexpected strain on development teams and led to software delays. Compounding the frustration of consumers was Iwata's disinterest in competitors such as Microsoft and Sony,[96][97] both of which experienced similar issues during the releases of the Xbox 360 and PlayStation 3 respectively.
                <ul>
                    <li>Subsequent hardware units under Iwata's tenure, including the Nintendo 3DS and Wii U, were not as successful as the DS and Wii, and Nintendo's finances took a downward turn starting in 2010.[83][86] During the development phase of the 3DS, a handheld device featuring stereoscopic 3D without the need of accessories, Iwata stated that his background in technology helped keep Nintendo's engineers in line.[87] It was hoped that the successor to the Nintendo DS would reinvigorate the company after profits began declining.[88] However, weak sales upon the release of the Nintendo 3DS caused the company's stock to fall by 12 percent on July 29, 2011.</li>
                    <li>The Wii U, released in November 2012,[94] was sold below its production cost as Nintendo hoped for stronger software sales to alleviate ongoing losses.[95] The addition of HD graphics, a feature not present in the original Wii, placed unexpected strain on development teams and led to software delays. Compounding the frustration of consumers was Iwata's disinterest in competitors such as Microsoft and Sony,[96][97] both of which experienced similar issues during the releases of the Xbox 360 and PlayStation 3 respectively.The Wii U, released in November 2012,[94] was sold below its production cost as Nintendo hoped for stronger software sales to alleviate ongoing losses.[95] The addition of HD graphics, a feature not present in the original Wii, placed unexpected strain on development teams and led to software delays. Compounding the frustration of consumers was Iwata's disinterest in competitors such as Microsoft and Sony,[96][97] both of which experienced similar issues during the releases of the Xbox 360 and PlayStation 3 respectively.</li>
                </ul>
               
                <h2>Illness and death</h2>
                <ul>
                    <li>On June 5, 2014, Nintendo announced that Iwata would not attend E3 2014 due to medical problems.[142] Iwata issued a public message to shareholders on June 24 that he had undergone surgery the previous week to remove a tumor in his bile duct discovered during a routine physical examination.[138][143] After roughly four months of recovery from a successful surgery, he returned to work in October. During this time he lost a notable amount of weight, but stated he was feeling healthier as a result.[144] Iwata made his first public appearance on a Nintendo Direct announcement on November 5, but looked "gaunt and pale".[1</li>
                    <li> He appeared to take this in stride and updated his own Mii, avatars used in Nintendo hardware, in June 2015 to reflect his slimmer self.[146] On January 28, 2015, Iwata came down with a high fever and was suspected to have influenza; a meeting with shareholders was postponed accordingly.[147] Some time after attending a different shareholder meeting on June 26, Iwata became ill again and was hospitalized.[148][149] Despite his hospitalization, Iwata continued to work via his laptop in his bed and provided feedback on Pokémon Go to Tsunekazu Ishihara.[149] He died due to complications from the tumor on July 11 at the age of 55. Nintendo announced his death the following day.[107]</li>
                </ul>

                <h2>Influence and legacy</h2>
                <li>On June 5, 2014, Nintendo announced that Iwata would not attend E3 2014 due to medical problems.[142] Iwata issued a public message to shareholders on June 24 that he had undergone surgery the previous week to remove a tumor in his bile duct discovered during a routine physical examination.[138][143] After roughly four months of recovery from a successful surgery, he returned to work in October. During this time he lost a notable amount of weight, but stated he was feeling healthier as a result.[144] Iwata made his first public appearance on a Nintendo Direct announcement on November 5, but looked "gaunt and pale".[145] He appeared to take this in stride and updated his own Mii, avatars used in Nintendo hardware, in June 2015 to reflect his slimmer self</li>
                <li>On January 28, 2015, Iwata came down with a high fever and was suspected to have influenza; a meeting with shareholders was postponed accordingly.[147] Some time after attending a different shareholder meeting on June 26, Iwata became ill again and was hospitalized.[148][149] Despite his hospitalization, Iwata continued to work via his laptop in his bed and provided feedback on Pokémon Go to Tsunekazu Ishihara.[149] He died due to complications from the tumor on July 11 at the age of 55. Nintendo announced his death the following day.[107]</li>
            <id="tribute-link"></id>
            </div>s
        </main>
    </body>

</html>

#2

Hi @G92 do you mind sharing the codepen link? Or some link to with a preview so it’s easier for us to visualize?


#3

#4

Hi @G92 a few things:

1. In CodePen, in each of your HTML/CSS/JavaScript, there’s no need to setup anything but your core code.

For ex. Your HTML can simply be:

<header>
  <!-- Your code -->
</header>
<main>
  <!-- Your code -->
</main>

Likewise your CSS can simply be:

body {
  background-color: #f4f4f4;
  font-family: Arial, Helvetica, Sans-Serif;
  font-size: 16px;
  line-height: 1.6em;
}

.contaier li {
  text-align: center;
  margin: auto;
}

.contaier h2 {
  text-align: center;
}

#tribute-info {
  text-align: ;
}

2. Your images are broken. For now, you can use placeholders found on the internet.

If you fix that it may be easier to see what you’re trying to do. I noticed that your headers are centered though so you’re on the right track already.


#5

I’ve edited your post for readability. When you enter a code block into the forum, precede it with a line of three backticks and follow it with a line of three backticks to make easier to read. See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.